【シンジ】戦略×エンジニア×Webデザイナー

Webコンサル、デザイン、サービス開発、経営に関することを呟きます。

【6ステップ徹底解説】デジタル時代に勝つブランド戦略の作り方

f:id:Shinji0418s:20210312085906j:plain

どうも。株)WIREBASEの中村です。

 

今回は、

・ブランド戦略ってナニ?

・ブランドを構築したいけどどこから始めたらいいかわからない

WEBサービスを運用しているけどブランドを構築したい

という方向けに、デジタル時代に勝つブランド戦略の作り方を徹底解説したいと思います。

 

もくじは以下の通りです。

・1. 先ずはゴールを定義する(なぜブランドを構築するのか?)

・2. 市場調査(ターゲット市場に関するインサイトは)

・3. ユーザー調査(ユーザーは今ナニを求めているのか?)

・4. 競合調査(競合の「強み」と「弱み」を理解する)

・5. SWOT分析(自社サービスの提供価値はなんのか?)

・6. ブランド戦略はナゼ重要なのか?

では、早速始めてみましょう。

 

1. 先ずはゴールを定義する(なぜブランドを構築するのか?)

 

 

ブランディングやリブランディングを行う理由は、業界やビジネスモデルによってさまざまだと思います。

 

例えば、

・スタートアップの場合だと、コアビジネスの価値観に基づいた確固たる企業文化を構築して、新しいオーディエンス(ユーザー)へのエンゲージメントを高める

・ビジネスがある程度確立されている中小企業の場合だと、既存の顧客を維持する為、ブランドに一貫性を持たせたい

などなど、様々な理由がありブランディングを構築していくことになります。

 

このように、明確な目標とブランディングをする目的をきちんと設定することで、より強固なブランドを構築が可能になり、

 

自社サービスの知名度、信頼性、権威性などを高めることができます。

 

2. 市場調査(ターゲット市場に関するインサイトは?

ある程度の方向性が決まれば、次は市場調査です。

 

市場調査は、ターゲットとする業界や分野に関する情報を収集することです。これにより、より精緻化された情報に基づいて意思決定することが可能になります。

 

情報というのは、具体的に業界やサービス分野におけるユーザーの典型的な行動、反応などの察を得ることです。

 

市場全体を俯瞰してみることで、インサイトを見つけ、よりユーザーの行動を真に理解することができるようになります。

 

3. ユーザー調査(ユーザーは今ナニを求めているのか?)

ユーザー調査はメインターゲットとするユーザー層のペルソナを作成するのに役立ちます。

 

ユーザー調査をするには主に以下の方法があります。

・ユーザーインタビュー

・オンライン調査(オンラインサーベイSNSを活用して)

 

見込客と話しをすることで、彼らのニーズ、抱えている課題、などが見えてきます。

サービスを開発する上で、独りよがりな意見をもとにブランドを構築していしまうケースが多いですが、しっかりユーザーの意見に耳を寄せることで、よりユーザー本位のブランドを構築することができます。

 

例えば、ウェブサイトなどデジタルサービスの場合ですと、ユーザーヒアリングを通じてユーザビリティのテストセッションを行ったりすることで、

 

明確なユーザーフローを定義し、効率化していくことで、より高いコンバージョンを狙えるようになります。

 

 4. 競合調査(競合の「強み」と「弱み」を理解する)

 競合他社の調査を行うことで、自社ブランドの差別化ポイントを見出すことができます。

 

実際の調査に取り掛かる前に、競合他社の活動状況を観察してみましょう。

自問してみてください。


・最近、ブランディングを成功させた競合他社はいるか?
ブランディングを成功させるために何をしたのか?
・以前はどういう活動をしたのか?
・他社の成功事例から何か学ぶことはあるか?

 

これらの質問に答えきれたら、パソコン上で競合他社のウェブサイトを分析し、主に以下の内容を確認します。

 

・ウェブサイト全体のパフォーマンス
・検索結果で上位に表示されているキーワード
・デジタルマーケティングの手法
・公開しているコンテンツの内容
・競合他社のブランディングのミスや矛盾
・競合他社の成功事例

 

これらを通してやることで、競合の強みと弱みを把握し、それをもとに独自のアイディアやアプローチを練ることでより良いブランディングを構築できるようになります。

 

SWOT分析(自社サービスの提供価値はなんのか?)

 前述のステップに加えて、SWOT分析を行うことで、自社ブランドの可能性より最大限に引き出すことができます。

主に見るべきは、以下の4点です。

・強み(Strength)
・弱み(Weakness)
・機会(Opportunity)
・脅威(Threat)

 

先ず、上記4点を軸にしたマトリクスを作って、それぞれ4項目に当てはまる内容をリストアップします。そうすることで潜在的な問題点やリスクを洗い出すことができ、改善することで、より良いブランドの構築が可能になります。

 

また、問題点やリスクだけでなく、独自の提供価値を見出すことができ、それに基づいてターゲットユーザーへの訴求が容易になります。

 

6. ブランド戦略はナゼ重要なのか?

ブランド戦略の策定は、ブランディングの基礎となるステップです。上記の内容が全てテキスト化されており、頭の中できちんと整理されているようであれば、ブランド構築も用意になってくるはずです。

 

ブランド戦略をきちんと構築することで、以下のことが可能になります。

・一貫性のあるブランド

ブランディングを通じたユーザーとのコミュニケーションを効率化

・顧客にニーズをすぐに見出し、適切なニーズ解決が可能

・質の高いユーザーを獲得することができる

・既存顧客をリテインすることができる

 

これらを一つずつ実施していくことでブランド戦略を通してより良いブランディングを遂行することができるようになります。是非、実践してみてください。

 

それでは、今日はこの辺で。


 株)WIREBASE公式ページ↓

wire-base.com

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

【徹底解説】離脱率を1/10にするUIデザインを作るためにやるべきこと8選

f:id:Shinji0418s:20210311191127j:plain

 

どうも。株)WIREBASEの中村です。

 

UI,UIと言われても具体的にどういうものなの?というのが分からない方も多いのではないでしょうか?

 

今回はそんな方に向けて、


・UIとはなんなのか?
・離脱率を1/10にするUIデザインを作る為にやるべきこと

 

を徹底的に解説していきます。

 

本記事のもくじは以下の通りです。

 

さて、早速始めましょう。

1. ユーザーインターフェース(UI)デザインって何?

ユーザーインターフェース(UI)デザインとは、ソフトウェアやハードウェア上のインターフェース(人間に見える表面部)のデザインのことです。よりユーザーにとって使いやすく、楽しいと感じるインターフェースを作ることで、ユーザー体験をより良いものにでき、その結果、流入もしくは転換するユーザーを増やすことができます。

 

例えば、ウェブサイトの例でみると、以下①と➁どちらのウェブサイトの見た目が良いでしょうか?多くの人は例➁の方が見やすいというのではないでしょうか?

例①

17 Examples of Ugly Websites and How We Would Fix Them

 

例➁

Minimalist web page design with neumorphic elements

 

その通りです。この例の様に、いかにユーザーにとって見やすいデザインを作るか、がUIデザインを作る上で大切になってきます。

 

では、具体的にどのようにUIデザインを作っていけば良いのか、以下にて解説します。

 

1. UIってどうデザインするの?

ユーザーインターフェースには主に以下3つのカテゴリ―があります。

  • グラフィカル・ユーザー・インターフェース(GUI):視覚的に見えるもので、ユーザーが操作できるもの。例えば、パソコンのデスクトップやウェブサイト等はGUIになります。

  • 声で操作するインターフェース(VUI):声で操作するインターフェース。iPhoneのSiriやAmazonのAlexaなど、スマートアシスタントの多くはVUIになります。

  • ジェスチャー・ベース・インターフェース:ユーザーが体の動きで操作するもの。例えば3Dのバーチャル空間で体を動かしながら操作することなどは代表例です。

これを踏まえて、それぞれどのようにUIを使っていけば良いか、解説していきます。

 

ユーザーは基本的に使いやすさや快適さを重視する

正直なところ、デザイン性にこだわるユーザーはあまりいません。どちらかというと、以下に自分のタスクを簡単に、最小限の労力でこなせるか、を最重視しています。

従って、UIデザインを作る時にもっとも注意すべきは、よいデザインを作ろうと必死になることではなくて、いかにユーザーの労力を軽減させられるか、に重きを置いた前提でデザインを作り上げることです。


具体例を出すと、例えば、ECサイトであれば、ユーザーの目的は「商品を買うこと」になります。


それであれば、できる限り商品を買うまでのステップを軽減してあげる、不要な広告を減らすことでユーザーが戸惑うことなく目的=「商品を買うこと」を達成できる環境を整えてあげる、ことが重要になります。

 

 

UIは「楽しい」ものでないとダメ

ユーザーのニーズを予測してデザインすることで、よりパーソナライズされた没入感のある体験を提供することができます。必要に応じてゲームの様な要素を取り入れることで、ユーザーもUIを楽しむことができます。

 

例えば、ホームページであれば、ロード中の円マークをキャラクターやアイコンに変えるなど、ちょっとした遊びの工夫でもユーザーのフラストレーションを軽減することができるので、試してみましょう。

 

UIはブランドの価値を伝え、ユーザーの信頼を勝ち取るもの

良いデザインに一貫して言えることは感情的価値を伝えることが上手いです。ユーザーは自分が共感できるブランドに良い感情を抱き続けるため、感情的価値を訴えかけることでより快適なユーザー体験を提供できるようになります。

 

3. UIとUXの違いは?

UXと混同して表現されることが多いのですが、UIデザインは人間の見える部分の全体的な雰囲気やデザインのことを指します。例えば、車でいえば、UXデザインは車全体の機能性やデザインのことで、UIデザインは運転席(いわゆる人が操作する場所)のことを指します。

 

4. 離脱率を軽減するUIの作り方は?

先程述べたように、ユーザーは人間であり、快適さや使いやすさを重視しています。

そのニーズに応えるには以下の方法を実践してみてください。

 

  1. ボタンをユーザーが予測した通りに動作するよう改善する
    例えば、「問い合わせはこちら」というボタンであれば、ユーザーは「問い合わせフォームに飛ぶのだろう」と予測してそのボタンをクリックします。しかし、それがFAQに飛んでしまったらどうでしょうか。予測したことと違うことが起きてしまった場合は、ユーザーある一定のフラストレーションを抱えて離脱してしまいます。従って、ユーザーが無意識でも自分の得たい情報を得ることができ、容易に目的を達成できれば、より良いです。なので、ボタンやその他の要素に関しても、できる限りユーザーが予測した通りに動作するよう改善する必要があります。

  2. ボタンやアイコンを明確にする
    色合いやその他のフォーマットを変えることで、ユーザーがすぐ発見できるように仕上げます。

  3. インターフェイスは出来る限りシンプルにする
    ユーザーの目的以外のものは全て排除しても良いくらいです。不要な広告やテキスト文面、その他要素などは、一切不要なものです。ユーザーの目的はなんなのか?徹底的に考えることで、不要な要素を排除できるようになります。

  4. ユーザーの目線を把握し、読みやすさを重視する
    ユーザーは一般的に画面中央よりも先ずは端を見る傾向があります。特に左端から右端にかけて目線を移す傾向があります。その目線に沿ってコンテンツのレイアウトを考えていきましょう。

    また、色、明るさ、コントラストを使って主要な機能に目線を向けさせることも必要です。

  5. ユーザーが実行するタスクは1ページあたり1つ
    例えば、「オンライン講座を受講する」と「無料説明会に参加する」というボタンが2つ並んでいるとします。この時点でユーザーはどちらを押せば良いのか、混乱して結局目的を達成せずに、離脱してしまうことが多いです。

    それであれば、オンライン講座を受講する、無料説明会に参加するというページをそれぞれ1枚設けて、ボタンを配置したほうがユーザーの労力もかからず、よりUIデザインの良いウェブサイトに仕上げることが可能になります。

  6. ユーザーのレスポンスやアクションについて、きちんとフィードバックを与え続ける

  7. 統一感をもったデザイン

  8. ユーザーの次のステップを明示してあげる
    ウェブサイトであれば、次のページはどういうコンテンツが待っているのか、事前に伝えてあげることで、次のページへ遷移した時に期待値を外すことなく、ユーザーが得たい情報を得られます。そうすることで結果的にフラストレーションをなくし離脱率を軽減することが可能になります。

どうでしょうか?少しはUIデザインに関する理解を深めれたでしょうか?

 

それでは、今日はこの辺で。

 

WEBに関するご相談はLINE/Twitterにてお待ちしております。

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

Python初心者でも30分で作れる『じゃんけん』ゲーム(丁寧な解説付き)

f:id:Shinji0418s:20210309102318j:plain

どうも。株)WIREBASEの中村です。

 

この記事を読んでいる方はPython初心者の方でしょうか?

機能性や利便性からすごい人気を博しているPythonですが、Pythonを学ぶ上でどこから始めれば良いか分からない、という初心者の方も正直多いのではないでしょうか?

 

先ずは、『じゃんけん』ゲームみたいな簡単なものから作っていくことをおススメします。たった2時間で作れてしまうので、スキマ時間のトレーニングとしては凄く良いと思いますし、もう少し難易度の高いプログラムを作る上でも活かせることが多いと思います。

 

本記事のもくじは以下の通りです。

  • 1. 『じゃんけん』ゲームとは何か?
  • 2. Pythonで『じゃんけん』ゲームを作ってみる
    • 2-1. ユーザーがアクションを選択できるようにする
    • 2-2. コンピューターがアクションを選択できるようにする
    • 2-3. 勝者を決める
  • 3. 連続してプレイできるようにする
  • 4. 結論

 

本記事を読み終えると、、、

・『じゃんけん』ゲームを作れるようになる

・input()でユーザーの入力を取込むことができるようになる

・Whileループでじゃんけんぽいを連続してプレイすることができるようになる

先ずは以下の回答コードをチェックしてみてください。

import random

while True:
    user_action = input("選択してください (グー, チョキ, パー): ")
  possible_actions = ["グー", "チョキ", "パー"]
  computer_action = random.choice(possible_actions)
  print(f"\nあなたが選択したのは {user_action}, コンピューターが選択したのは {computer_action}.\n")

  if user_action == computer_action:
    print(f"両者が選んだのは {user_action}. 引き分けです!")
  elif user_action == "グー":
    if computer_action == "チョキ":
        print("グーがチョキに勝ちました! あなたの勝ちです!")
    else:
        print("パーがグーに勝ちました! あなたの負けです")
  elif user_action == "パー":
    if comuter_action == "グー":
        print("パーがグーに勝ちました! あなたの勝ちです!")
    else:
        print("チョキがパーに勝ちました! あなたの負けです")
  elif user_action == "チョキ":
    if computer_action == "パー":
        print("チョキがパーに勝ちました! あなたの勝ちです!")
    else:
        print("グーがチョキに勝ちました! あなたの負けです")

    play_again = input("もう一回プレイしますか? (はい/いいえ): ")
    if play_again.lower() != "はい":
        break

 

 

それでは、早速作っていきましょうー。

 

1. 『じゃんけん』ゲームとは何か?

物事や役割を決める時に使う『じゃんけんぽ』ゲーム。知らない人はほぼいないのではないでしょうか?

知らない方もいるもしれないので、やり方とルールを説明しておきます。じゃんけんゲームは主に2人が対面となって遊ぶもので、参加者は「じゃんけんぽい!」と同時に、手で、グー(拳)、チョキ(2本の指を出して)、パー(手のひらを広げて)を作ります。

 

ルールは簡単で、

・グーはチョキに勝つ

・チョキはパーに勝つ

・パーはグーに勝つ

です。

ここまでやり方とルールを整理できたところで、どのようにPythonでプログラムを作成するかを考えていきます。

 

2. Pythonで『じゃんけん』ゲームを作ってみる

上記のやり方とルールに沿って、じゃんけんゲームを作っていきます。

始めるために、先ずは『コンピューターがランダムに結果を出す』モジュールをインポートしましょう。

import random

 

これでコンピューターはランダムに結果を出してくれるようになりました。

 

2-1. ユーザーがアクションを選択できるようにする

次は『ユーザーがグー、チョキ、パーのいずれかを選択できる』ようにしてきます。

user_action = input("選択してください (グー, チョキ, パー): ")


2-2. コンピューターがアクションを選択できるようにする

ユーザーがアクションを入力したので、次はrandom.choice() を使ってコンピューターにランダムに結果を選択させる必要があります。

possible_actions = ["グー", "チョキ", "パー"]
computer_action = random.choice(possible_actions)

 

これで、コンピューターが、グー、チョキ、パーのリストからランダムに結果を選択できるようになりました。ここで、ユーザーにも分かりやすいように、また今後デバッグを起きた時のためにユーザーとコンピューターが選択した内容をprint しておきます。

print(f"\nあなたが選択したのは {user_action}, コンピューターが選択したのは {computer_action}.\n")

 

2-3. 勝者を決める
2人のプレイヤーがアクションを選択したところで、勝者を決める必要があります。
これは  if … elif … else でユーザーのアクションを比較して勝者を決めることができます。

プログラムは以下の通りです。

if user_action == computer_action:
    print(f"両者が選んだのは {user_action}. 引き分けです!")
elif user_action == "グー":
    if computer_action == "チョキ":
        print("グーがチョキに勝ちました! あなたの勝ちです!")
    else:
        print("パーがグーに勝ちました! あなたの負けです")
elif user_action == "パー":
    if comuter_action == "グー":
        print("パーがグーに勝ちました! あなたの勝ちです!")
    else:
        print("チョキがパーに勝ちました! あなたの負けです")
elif user_action == "チョキ":
    if computer_action == "パー":
        print("チョキがパーに勝ちました! あなたの勝ちです!")
    else:
        print("グーがチョキに勝ちました! あなたの負けです")

 

ちなみに、最初に引き分けの条件を定義することで、かなりの数のケースを最初に取り除くことができるため、効率的にプログラムが組めます。


全てのプログラムを繋ぎあわせると以下の通りです。

import random

user_action = input("選択してください (グー, チョキ, パー): ")
possible_actions = ["グー", "チョキ", "パー"]
computer_action = random.choice(possible_actions)
print(f"\nあなたが選択したのは {user_action}, コンピューターが選択したのは {computer_action}.\n")

if user_action == computer_action:
    print(f"両者が選んだのは {user_action}. 引き分けです!")
elif user_action == "グー":
    if computer_action == "チョキ":
        print("グーがチョキに勝ちました! あなたの勝ちです!")
    else:
        print("パーがグーに勝ちました! あなたの負けです")
elif user_action == "パー":
    if comuter_action == "グー":
        print("パーがグーに勝ちました! あなたの勝ちです!")
    else:
        print("チョキがパーに勝ちました! あなたの負けです")
elif user_action == "チョキ":
    if computer_action == "パー":
        print("チョキがパーに勝ちました! あなたの勝ちです!")
    else:
        print("グーがチョキに勝ちました! あなたの負けです")

これで、ユーザーの選択を取込み、コンピューターがランダムにアクションを選択して、勝者を決定するプログラムが出来上がりました。

 

但し、これだとじゃんけんゲームは1回したプレイできませんね・・・。

 

3.連続してプレイできるようにする

何回が連続して遊べるともっと楽しいと思うので、while loop を使って連続して無限にじゃんけんゲームで遊べるようにします。

 

import random

while True:
    user_action = input("選択してください (グー, チョキ, パー): ")
  possible_actions = ["グー", "チョキ", "パー"]
  computer_action = random.choice(possible_actions)
  print(f"\nあなたが選択したのは {user_action}, コンピューターが選択したのは {computer_action}.\n")

  if user_action == computer_action:
    print(f"両者が選んだのは {user_action}. 引き分けです!")
  elif user_action == "グー":
    if computer_action == "チョキ":
        print("グーがチョキに勝ちました! あなたの勝ちです!")
    else:
        print("パーがグーに勝ちました! あなたの負けです")
  elif user_action == "パー":
    if comuter_action == "グー":
        print("パーがグーに勝ちました! あなたの勝ちです!")
    else:
        print("チョキがパーに勝ちました! あなたの負けです")
  elif user_action == "チョキ":
    if computer_action == "パー":
        print("チョキがパーに勝ちました! あなたの勝ちです!")
    else:
        print("グーがチョキに勝ちました! あなたの負けです")

    play_again = input("もう一回プレイしますか? (はい/いいえ): ")
    if play_again.lower() != "はい":
        break

 

黄色にハイライトされた箇所で、ユーザーがもう一度プレイしたいかどうかを聞き、答えが"いいえ"であればゲームを中断する。"はい"であればコンソールを終了するまで無限にプレイできるようになりました。

 

これで完成です!

 

4. 結論

おめでとうございます!これであなたも初めてのじゃんけんプログラムを作ることができました。

 

以下の内容を学べたのではないでしょうか?

・『じゃんけん』ゲームを作れるようになる

・input()でユーザーの入力を取込むことができるようになる

・Whileループでじゃんけんぽいを連続してプレイすることができるようになる

 

今回は、かなり初歩的なプログラムの作成でしたが、もう少し難易度の高いプログラム作成にチャレンジする際もじゃんけんプログラムで培った内容は必ず活きてくると思います!

 

他にも上級編としてPythonで様々なものを作っているので以下にてチェックしてみてください。

wirebase-nakamura.hatenablog.com

 

wirebase-nakamura.hatenablog.com

 

それでは、今日はこの辺で。

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

 

たったの2時間でPythonとWit.aiで日本語の発音チェッカーを作ってみた

f:id:Shinji0418s:20210308090923j:plainどうも。株式会社WIREBASEの中村です。

 

留学をしてきた身として、日本語を学びたい外国人はたくさんいるなという印象ですが、アジア圏内でも日本語の発音ってとにかく難しくて、途中で学ぶのを諦めてしまう外国人もたくさんみてきました。

 

そこで、PythonとWit.ai.を使って外国人向けの日本語発音チェッカーを作ってみようと思います。もくじは以下の通りです。

 

・wit.aiで新しいプロジェクトを立ち上げる

・音声録音プログラムを作成

・音声の認識評価プログラムを作成

・プロトタイプをテストする

・streamlitでプログラムをカスタマイズ

・完成!!

 

それでは、早速始めてみましょう。

ソースコードを書く前に、、、人の音声を認識評価する方法はいくつかあります。

 

例えば、Praatのような複合音声ソフトを使えば、ネイティブの発音とどれくらいの乖離があるのかを評価することができます。ただ、データを集めて発音を分析するのはかなりの時間がかかる為、あまり再現性のある方法ではありません。

 

そこでWit.aiを使います。Wit.aiは140以上の言語をサポートしているので、先ずデータを集める必要はないえす。オープンソースなので、人間の音声やテキストを構造化されたデータに変換してくれるので、このような会話型のアプリケーションを構築する際はめっちゃ使えます。

 

では、Wit.aiとPythonを使って以下の様なアプリケーションを作ってみようと思います。

・発音したい日本語のリストを作成

・選んだ単語の音声を録音する。(音声はテキストに変換される)

Pythonのコードで、インプットされた単語と予想される単語を比較

 

 

先ず初めに、Wit.aiで新しいプロジェクトを立ち上げます。

FacebookアカウントでWit.aiに登録

・新しいWitプロジェクトを立ち上げる

・「言語」のドロップダウンメニューから日本語を選択

・プロジェクト生成後、アプリの設定タブでアクセストークンを生成して、それをメモしておく

 

 

Pythonで音声を録音するプログラムを作成

先ずは、PyAudioという音声録音ライブラリーをインストールします。

pip3 install pyaudio

 

ファイルを作ります。ここでは、recorder.pyというファイル名で作ります。

f:id:Shinji0418s:20210308084021p:plain

 

 

日本語の発音を認識して評価するプログラムを作成

ここで、日本の文字形態(ひらがな、カタカナ、漢字)をローマ字に変換するPykakasiというライブラリが必要になります。

pip3 install pykakasi

import requests
import json
import pykakasi
from recorder import record_audio, read_audio

 

Wit.aiのコンフィギュレーションを追加します。

# Wit speech API endpoint
API_ENDPOINT = 'https://api.wit.ai/'
API_FUNCTION_SPEECH = 'speech'

# Wit API token
wit_access_token = 'VPEZHKEUXSSOGT4EVCO6JXCGTJLP'

 

音声を認識するためのコードを書きます。

f:id:Shinji0418s:20210308084319p:plain

 

次に、日本語の文字をローマ字に変換して、ユーザーがインプットした音声と、予想される単語を比較することができるようになります。

 

これができたら、評価機能をつくっていきましょう。

f:id:Shinji0418s:20210308084513p:plain

 

mainメソッドでプログラムを開始してみます。

f:id:Shinji0418s:20210308084550p:plain

 

 後々のテスト用に「猫」という単語を仮に置いておきます。

テスト後にランダムな単語を使えるようにしておきます。

 

また、録音の上限時間を4秒に設定しました。これも今後ユーザーが自由に時間を設定できるようにしていきます。

 

 

プロトタイプでテストしてみる

プログラムを開始します

python3 japan.py

 

「ねこ」と発音してみると、

Listening...
Finished recording.
{'entities': {}, 'intents': , 'text': '猫', 'traits': {}}

You said: 猫
**************************************
猫[Neko]
You said: neko which is: Correct

 

・Wi.aiが単語を認識して漢字で出力してくれました

・音声入力はローマ字に変換してくれました

Pythonで予想した単語とインプットした単語が一致しました

 

Listening...
Finished recording.
{'entities': {}, 'intents': , 'text': 'テスト', 'traits': {}}

You said: テスト
**************************************
テスト[Tesuto]
You said: tesuto which is: Incorrect

 

これでプロトタイプの完成です!

 

 

Streamlitでプログラムをカスタマイズする

「ねこ」以外の単語も扱えるようにします。

まずは、StreamlitとBokehをインストールします。

pip3 install bokeh
pip3 install streamlit

 

import streamlit as st
import random
from bokeh.models.widgets import Button
from bokeh.models import CustomJS
import SessionState

 

evaluate_speech関数を修正し、角括弧の前に対象となる単語をするようにします。

f:id:Shinji0418s:20210308085825p:plain

 

ランダムな単語を選択できるようにします。

f:id:Shinji0418s:20210308085857p:plain

 

そして、mainメソッドでUIを作っていきます。

f:id:Shinji0418s:20210308085949p:plain

 

これでユーザーは1秒~10秒までの録音時間の間で様々な単語を録音できるようになりました。

 

 

完成!!

Streamlitコマンドを実行します。

streamlit run japan.py

 

そうすると、以下の様な結果になりました。

https://miro.medium.com/max/700/1*1c0nwl34ifkRbNXkVlp9tA.gif

 

これで完成です!

 

大体2時間くらいで出来ちゃいました。

 

それでは、今日はこの辺で。

 

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

たった16行のPythonで株式分析ツールを作ってみた

 

f:id:Shinji0418s:20210304090619j:plainどうも。株)WIREBASEの中村です。

 

今回は、たった16行のPythonコードで米国株向けのペアトレード分析ツールを作ってみようと思います。

 

最近、注目度の高いプログラミング言語Python(パイソン)」ですが、その機能性や利便性からプログラマーに凄く親しまれています。

 

人口知能(機械学習や深層学習)などの超専門分野の開発にも使われている一方、文法が平易なため、プログラミング初心者の方でも大規模なWebサービス・アプリケーション開発が短期間でできちゃったりします。

 

そんな初心者でも簡単にできちゃう、たった16行のPythonコードで作っちゃおうと思います。

 

 

①先ずはデータを可視化する

使用するデータはオープンソース(QuandlやYahooFinance)のものを使用します。APIを介して今時点の株式

 

 

f:id:Shinji0418s:20210304084436p:plain



データを引っ張ってきます。

 

それでは、早速、ライブラリをインポートしてみましょう。

import pandas as pd
import datetime as dt
import seaborn as sns
from matplotlib import pyplot as plt
plt.style.use('ggplot')
%matplotlib inline

 

Pandas を使ってデータの分析やアップデートを行います。

 

また、Seabornとmatplotlibを使って以下の様にデータを可視化します。

 

Dataset available

 

 

➁データを分析する
今回は年単位でデータを引っ張ってきましょう。

 

df['date'] = pd.to_datetime(df['date'])
df['year'] =df['date'].dt.year

 

2つの株式銘柄を比較するには、同じ日付範囲のデータを辿る必要があるのですが、株式によっては、以下の様に発行日から1年もたっていないものもある為、

 

https://miro.medium.com/max/392/1*3d01COF4iAja6xNpNn76Rg.png

 

そのような株式は以下のコードで除きます。

count_df=pd.DataFrame(df.Name.value_counts()[:470], columns=["Name", "Count"]).reset_index()list_valid_shares=list(count_df["index"])
final_df=df[df.Name.isin(list_valid_shares)]

 

では、データをみていきましょう。

 

Data for further processing

 

上のテーブルでは、2013年から2019年までのデータがあります。

 

ゴールは特定の年において、最も類似性の高い株式を見つけることです。

2018年のデータをみていきましょう。

 

data_by_year=final_df.groupby("year")
data_2018=data_by_year.get_group(2018)

 

Data for the year 2018

 

このデータでは分かりづらいので、時系列のデータに変換してみましょう。

 

日付をインデックスとして、それぞれ日付毎の銘柄を比較できるようにします。

 

Pivot data for 2018

 

そして、pandaのcorrメソッドを使うと、2018年のデータと類似している銘柄を見つけることができます。

 

 

corr_mat=pivot_df.corr(method ='pearson').apply(lambda x : x.abs())

f:id:Shinji0418s:20210304084953p:plain

 

 

そしたら、unstackメソッドを使ったり、結果を並べ替えたりして銘柄毎の相関性を分析していきます。

先ずは、上のテーブルに記載されいている上位10の株式と使って、相関性を見つけ出しましょう。

sorted_corr = corr_mat.unstack().sort_values(kind="quicksort", ascending=False)sc=pd.DataFrame(sorted_corr, columns=["Value"])[470:480]

 

Sorted correlation DF

 

 

f:id:Shinji0418s:20210304085319p:plain



 

Final top five groups for pair trading

 

 

 

③結果を可視化する

 

最後に、matplotlibモジュールを使って出力します。

 

f:id:Shinji0418s:20210304085539p:plain

 

 

Graph

 

 

Graph

 

 

Graph

 

これで完成です!

どうだったでしょうか?初心者の方でも問題なく進めることができると思います。

 

もっと複雑な分析ツールや、自動売買ツールも開発できたりするので、気軽にご相談くださいませ。

 

それでは、今日はこの辺で。

 

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

Web周りの案件は全て弊社に依頼しないと非常に損な理由

f:id:Shinji0418s:20210303221618j:plainどうも。株)WIREBASEの中村です。

 

本日は、

 

『Web周りの案件は全て弊社に依頼しないと損な理由』

 

を説明しようと思います。

 

一般の方には難しい話なので、業界の方以外はここで閉じてもらって大丈夫です。

 

早速説明してきます。

①Web周りの案件であればなんでも受注できるようになった

特にコロナ禍でWeb案件の需要が一気に高まってきている昨今、SEOリスティング広告アプリ制作など単体のソリューションで戦う会社は限界が見え始めています。

 

一方で、弊社みたいWeb関連のことであれば一気通貫で何でもやるよ、という会社は高単価案件をバンバン獲得しています。

 

なぜか??

 

各プロダクト毎に切り出してそれぞれ別の業者に委託すると、ステークホルダーが増えることで連携がとりにくくなります。

 

すると、認識に齟齬があったりで余計にコストや時間がかかるだけで、アウトプットは大したことなかった、なんてことがざらにあったりするんです。

 

例えば、アプリの開発をアプリ開発業者、アプリに係る公式サイトをWeb制作業者に頼んだ結果、それぞれ全く違うデザインで出来上がってしまい、公式サイトを作り直さなければならなかった、ということもありえます。

 

ネイティブアプリ開発とアプリ用公式サイトの開発まで内製化できてしまうとチーム内での共通認識に齟齬もなく進められるので、

 

・時間&コストは低減できるし、

・より効率よくお客様のニーズに沿ったものができるわけです

 

弊社は、今年に入って大幅な組織拡張をした結果、モバイルアプリ開発からwebサイト、ECサイト(shopifyやthinkificなど)まで、

 

Web周りであれば、ほぼ全てサービスを開発できる体制が整いました。

 

 

結果、

・ただのLP制作だけではなく、

 ・モバイルアプリからWebサイト、ECサイトまで

 ・全てのプロダクトを開発できる

 

いわゆる、スーパーWeb開発会社として、様々なプロダクト・サービス開発の案件を受注できるようになりました。

 

 

➁戦略から実行フェーズまで全レイヤーの案件に対応できるようになった
横軸(プロダクト)の対応幅がめちゃくちゃ広くなったことに加えて、

 

上流(戦略・企画)から下流(実行)までも一気通貫で対応できるようになっちゃいました。

昔はパワポ50枚で1億円なんていう案件もざらにありましたが、不景気の昨今、それだけで食っていけるコンサルタントはオワコンになりつつあります。

 

あの超一流と言われているマッキンゼーでさえ、実行部隊の人員拡張に力を入れたりと、戦略構築や企画立案で終わりではなく、実行支援の需要も高まりつつあるのが現状です。

 

これからは机上の空論だけではなく、いかに実行支援で成果を出すことができるか、がコンサルタントとしても求められることになってきます。

 

弊社は、主にwebコンサルが主体の事業でしたが、思い切った人員拡張(デザイン・開発・SEO)を行い、

 

戦略や企画提案だけでなく、末端の実行フェーズまで受注できる体制を整えました。

 

 

③超優秀なエンジニアが揃った

過去に以下の様な記事を書かせてもらっていますが、あれから月1ベースで優秀なエンジニアが増えており、現在では約30名程のエンジニアがいつでも稼働できるよう待機している状態です。

wirebase-nakamura.hatenablog.com


 
彼らはWebサイト制作なんて朝飯前で、モバイルアプリ開発や超複雑なWebシステム開発ECサイト(ShopifyやThinkificなどを含む)構築のプロフェッショナルです。

 

高品質なアウトプットを出せるだけでなく、とにかく『仕事が早い』

LP一枚であれば最短1日で作れちゃいますし、2~3週間でWeb制作なんて当たり前のことです。

 

いつもお客様には、「こんな良いモノをこんなすぐ出せるの?」と驚かれています。

 

が、このくらいのアウトプットレベルが弊社では当たり前になってきており、エンジニアそれぞれが、もっと良いモノを、もっと早く出せるよう、切磋琢磨しています。

 

 

④本気度・徹底度が違う


これは設立当初から変わらないのですが、

 

“自分が世界を変える”

 

そんな突拍子もないことを考えれるクレイジーな人こそが、本当にこの世界を変えることができると信じています。

 

そんな方々が持つ無垢な夢の具現化を
お手伝いさせていただく。

 

それこそが我々の存在意義だと考えます。



弊社は、かなりの熱量を持ったお客様しか対応しません。

基本的にお金儲けを目的としたサービスではなくて、「このサービスを世の中に広めたい」 という、高い志と熱量を持ったお客様とのお仕事を優先させて頂いています。

 

結果、異常な執着心と徹底度でお客様のサービスを世に広めたい、と必然的に弊社も本気にならざるを得ないのです。

 

現在の契約解除率は5%を下回っており、最後までご対応した全てのお客様に満足してもらっています。満足度としては、かなり高い方ではないでしょうか。

 

コロナ禍で補助金助成金を使ったWebサービス・アプリケーション開発への需要が一気に高まってきたように思います。

 

弊社は、クレイジーなお客様の夢をかなえるために、他社にはないスピード感と着実性で成果が出るまで徹底的にサポートをさせて頂きますので、

 

引き続きよろしくお願い致します。

 

 

長々と綴りましたが、とりあえず小粒の案件でもいいので、弊社に投げてみてください。弊社の良さがわかると思いますよ。

 

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

 

 

 

 

 

 

 

 

無限にスクロールできるウェブサイトをVue.jsで作ってみた

f:id:Shinji0418s:20210301093216j:plain

どうも。株)WIREBASEの中村です。

 

本日もテクニカルな話になるのですが、無限にスクロールできるウェブサイトをVue.jsで作ってみたいと思います。今回はWikipediaAPIを使った非常にシンプルな検索ページ(英語)を作成してみます。

 

早速、vur-clieを使って新しいプロジェクトを立てます。

このプロジェクトでは主に以下3つのコンポーネントが必要となります。

・検索ページとリスト化のコンポーネント
・検索結果のコンポーネント
・ローダーコンポーネント

 

簡易的な設計が終わったところでHTMLを書き出します。

f:id:Shinji0418s:20210301085701p:plain

HTMLの部分では、検索エンジン、検索ボックス内のデフォルトメッセージ、仮想スクローラーのリストなどが必要です。

 

仮想スクローラーのリストはこちらGitHub上のプロジェクトを使います。

 

仮想スクローラーのライブラリ無しでは、HTML要素が多くなりすぎる、且つ本プロジェクトの様に無限スクロールの機能を要するものとなると、フロントエンドの動きが格段に悪くなってしまいます。仮想スクローラーがあると、スムーズな検索、スクロールを実現できるので、かなり有効です。

 

では、次はJavascriptの部分ですね。以下の通り書き出します。

f:id:Shinji0418s:20210301090825p:plain

 

HTTP通信のためのコンポーネントとHTTP通信をより簡単に行うことができるaxiosのライブラリをインポートします。

f:id:Shinji0418s:20210301091350p:plain

 

仮想リストには、検索結果のタイトルと説明をレンダリングするために使用するsourceプロップを渡します。

 

これで仮想リストと検索結果の土台ができたので、WikipediaAPIと連携してみましょう。先ずは、ユーザーが入力した検索テキストに基づいて検索を実行するメソッドを作成します。

f:id:Shinji0418s:20210301092029p:plain

 

これで検索部分の準備ができたので、検索メソッドで下記の条件を呼び出してみましょう。

・ユーザーが検索ボックスに入力を開始したとき

・ユーザーが下にスクロールしたとき

EndlessList Vue コンポーネント上記2つのケースの両方を処理してみます。

f:id:Shinji0418s:20210301092411p:plain

 

searchQueryの値が変わるたびに新しい検索結果を得られるよう、searchQueryにはウオッチャーを使用しています。また、最後の検索文字が入力されてから200ミリ秒後に検索結果を表示するため、デバウンス関数も使用しています。

 

それでは、Vueアプリをnpm run serveで実行してみましょう。

以下が実行した結果です。無限にスクロールできる、且つ超スムーズですね。

 

https://miro.medium.com/max/640/1*08L0WmYbqncJJ765_27SSQ.gif

 

初心者にとっても比較的簡単だと思うので、是非、試してみてください。

 

では、今日はここら辺で。

 

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter