2017

 

2017ふりかえり

1月バタバタと制作のデザインにおわれる

2月ひたすらデザインに追われる

3月何か新しいことを意気込む

4月形にならずモヤモヤを3ヶ月続ける

こせんかくのデザインにもおわれた

8月別会社へ

12月まで

なんやんなんやと広告と自社統制に追われる

 

振り返ると、追われてばかり。

何かを追いかけてはいたけれど、それが形にならず、結局勝ち馬に乗りに行ったはいいものの、それすらも中途半端。

己の弱さが露呈した一年だった

 

自責のつもりが他責

自分の弱さを棚に上げて、人を責める

 

人を見て行動する

上の人、下の人、対等の人に対して、統一の意識がない。

バラバラになっている。

それでは信用をうしないかねない

 

後回し、先延ばし

全てはここから始まっている。

連絡はすぐ返す。やらなければならないことはまずやる。

優先順位付けがなってない。

 

約束を守れていない

お互いに決めたなら、相手がどうこうではなく、ちゃんと自分は守る。

相手が破っていたとして、自分が損をするという感覚になることがおかしい。

それをすると人を信じられない

 

詰めが甘い

まぁ、大丈夫だろう。

で、大丈夫なことなどない。ほぼほぼ事故る。

しかもえげつないほどに。

 

人の陰口、悪口で自分を満たす

これは人の思ってることや、誰かを悪く言ってることも、散々拾い上げた挙句、自分からスピーカーとなることがダメなところ。

本当にその人のことを思うとかではなく、なんとなく自分で思ったことを適当に話してしまう。

人に話したことで、ここだけの話、っていうのはほぼないものと思った方が良い。

 

 

 

年末に自分のダメなところがバタバタと示された形になった。

ちょうど良い機会だったのだろうと、今は思う。

 

人はそれぞれに思うことがあり、

自分の考え方がある。

俺が正しいという基本的な大前提が強く、人の言うことに耳を傾けているつもりで、傾けていない。

 

 

根底は、

こちらから、

宣言し、約束は守る。

 

ということ。

ここに尽きる。

 

来年は確実にいろんなことが起こる。

そろそろ腹をくくらないといけない。

 

どうする、俺。

 

 

1000年残るものづくり

 

時代が求めるものを作る

 

優しい笑顔があふれる世界を作る

 

誰かを想える世界を作る

 

 もっと人間らしく

 

感情に任せて

理念の再開発

<日記アプリ>

目標設定アプリ

 

<サービス名>

LIFE 

LIFE FILE

Re

Le

Plan

PLAN

Porn

 

 

就活生、

高校生、

アスリート、

高齢者、

ビジネスマン、

一般ユーザー、

主婦、

そのフェーズごとに必要な機能、プランニングを追加していく。

アップデートの毎に必要な項目を提供

といった拡散の方法をとる。

 

「人類が目標を達成する手助けをする」

 

人生の目標設定を明確に明文化し、実行にうつすことが出来るようになる。

必要項目を入力すると、目標から逆算して今すべきことが明らかになる。

 

ある分野に特化し、その後徹底的に広げていく。

例えば、「就活」「趣味」「創作活動」「肉体改造」

 

その分野で計画の中で必要な情報を全てこちらから提供していく。

その提供の際の目標というものは、

 

 人の生きがい、仕事のやりがいは、

「達成」(貢献)が大きな割合を占める。

 

 

入力項目

・目標

・期日

・現状

・費用

 

<機能>

投稿機能

日記投稿機能

シェア

同じ時間帯に頑張っている人が見える

同じ目標を定めた人の傾向が見える

 リスケジュール機能

ルート案内で、その都度変わるように、

ルート変更機能

カウンセリング機能、

 欲求抑制機能、

 

 

何かを迷った時にai、アプリに質問すると答えてくれる。

 

 

占いなどの統計情報をとって、

それによってアルゴリズムをあてて、

リスケジュールする。

 

 お寺などの支柱数年などを放り込む。

ロジカルだけではうごかないから、

サイコロジカルな形で、夢を見せてあげる

 

今の子供は夢持ってないし、

見方も知らないから、

みんな淡々としてる。

 

 

達成が大事、

死ぬまでにそれを達成させてあげるアプリ

 

今の子たちは挫折しやすいから、それをしないようにしてくれる。

 

挫折を救ってやる!

 

 

誰かと会いたい、

お互いがマッチしたら、

お互いのGPSが表示されて、出会える。

 

 

 

 

リア充になるほど育つアバターを設置し、

自分の人生をゲーム感覚で育てていく。

 

自分の目標を自分で設定し、

それに対する評価ポイントをAIで設定。

達成するごとに、ポイントを付与する。

 

そのポイントを使って、目標達成のご褒美が貰える。

 

目標を達成すればするほど、アバターが育ったり、

アバターではないポイントに変換することも可能。

その世界でのアバターの充実度は、現実とリンクしている。

 

 

 

 

 

 

 

 

 

 

 

「機械は馬鹿が使えないとダメなんだ」 

基本的には馬鹿ターゲットのモノづくり

 

 

 

 

 

7つの項目に対する答え

 

1~5年後、10年後、30年後、100年後、300年後、500年後、1000年後

を計画する。

そこまで作って初めて価値あるものと言えるのではないのか、

 

 

 名刺及びロゴアイディア

meta company = chokoku , position = ceo

 デザイン案

・五線譜

・電子回路

 ・コード

 

・ロゴ

 

 

 

創るもの

 

パーカー

名刺

ポロシャツ

 

 

企業理念を思考する覚書


企業理念候補


世界の感情を揺さぶる

無意識に人を動かすものを作る

useful x art の先を作る

無意識を操作し、感情的な世界を創る

無意識に人を引き付けるモノづくり

思考を止める

無意識に体を動かす

無意識に人を動かす

自分の力がどこまで通用するかを知る

自力が正当に使える社会を作る

 

力の先を行く

感情の揺さぶりから、無意識的に人を動かしていく。

 

 

感情的に

 

感情を動かし、世界を動かす

感情をデザインし、世界をアートにする

感情をデザインし、人生をアートにする

 

感情をデザインすることで、人間の世界を創る

自由を創造する

人生の楽しみを創造する

 

人の生きる目的を創る

朝起きる目的を創る

 

世界が良くなる情報を提供する

 

背中を押す感情をデザインする

 

感情と思考をデザインする

感情をデザインし、余裕を作ることで人が人として、

人生を楽しめる社会を創ることが目的です。

 

社会的感情をデザインする

 

無意識によって社会をデザインする

社会の感情を豊かにする

 

社会を豊かにデザインする

感性豊かな社会にデザインする

 

暫定

 

無意識に使うモノを創る

 

人が人への気遣いを行うには、相手の事を考える余裕と思いやりが必要であり、

新しい発想や未来への進歩、世界的な社会問題の根本には必ず感情的な原因がある。

人間として、世界の調和を考えた判断をする為には豊かな感情が必要である。

モノが溢れる世の中で亡くなっていくのが思考であり、感情である。

感情に語りかけるものを創ることで無意識に入り込み、「習慣的な行動をデザインする」ことで、ユーザーの課題を解決していく事を通して「感性豊かな社会にデザインする」ことが当社の理念である。

 

 

無意識を創り、未来を創る

 

新しい発想や未来への進歩、世界的な社会問題の根本には必ず感情的な原因がある。

人間として、世界の調和を考えた判断をする為には豊かな感情が必要である。

あらゆるものがIT化していく世の中で亡くなっていくのが思考であり、感情である。

感情に語りかけるものを創ることで無意識に入り込み、「習慣的な行動をデザインする」ことで、ユーザーの課題を無意識に解決していく事を通して「感性豊かな社会にデザインする」ことが当社の理念である。

 

 

 ユーザーインターフェイスを考える。

 

 

 

無意識で未来をデザインする

無意識によって未来をデザインする

無意識で感情をデザインする

 

 

習慣というのは、過去の経験や外部的要因によって形成される、無意識的反復行動の事である。その習慣に人間の行動の源泉があり、感情の凝縮された行為である。通常目を向けない無意識に入り込むことが、その人の行動を変え、習慣を変えていくことである。現在人間が最も多く目を向け、関わっているのはWebやIoTといった、IT関係の技術である。

つまり、ITを使って社会に語りかける事こそが、無意識への介入をする最も効果的な方法である。

そうやって無意識に使えるモノを創ることでユーザーの自由な時間を増やすことで、未来を思考する時間を少しでも増やすことが出来る。

感情に語りかけるものを創ることで無意識に入り込み、「習慣的な行動をデザインする」ことで、ユーザーの課題を無意識に解決していく事を通して「感性豊かな社会にデザインする」ことが当社の理念である。

 

 

 ユーザーが意識した時点で、もうすでにそれは失敗である。

全てを無意識に落としてこそ、本当にユーザビリティがあるということで、

究極的にユーザーに選択肢を与えないことである。

 ユーザーに不必要なことをすべて排除させ、

それ以外の事に思考する時間を向けさせてこそ、

本当のユーザビリティである、

 

 

嘘をつかない人間なんていない。

根本的に人間は楽をしたい生き物である。

であれば、選択肢を与えず、無意識に落としてあげる事こそが、

最高に高いユーザビリティである。

 

 

 

 

 

コーポレートカラー

黒、臙脂

 

 

 

クレド

感情重視

人は感情の奴隷である。

人を最終的に動かすのは感情であり、ユーザーの感情への理解と、

感情へのアプローチこそが行動喚起できる最重要項目である。

 

無意識重視

無意識の行動は情報の源泉であり、習慣や感情が凝縮されている。

人の行動の

感情が先に立つ無意識的な行動を理解し、習慣的な行動にアプローチする。

 

密度重視

人生(作品)において最重要なのは密度である。

一つ一つの作品や出来事に、徹底的に密度を大事にする。

 

合理的

勝利とは偶然ではなく、具体的な勝算の上にある事実である。

与えること、感謝、ダイバーシティの受容といったことも、

全て合理的に考えると必要なことであると理解でき、

結果的に社会的、人間的に成長していくことが可能である。

 

超克

リスクなくして前進なし。

常に前向きに思考し、失敗をlearning experienceと捉え、常に学んでいく。

ハイリスクであれど、そこに挑戦がないことを生きているとは言わない。

リスクを抱えて最後まで挑み続け、常に前進し、自分を超克し、社会を超克する

 

矜持

全てに自分が表れる。

自分の行動、作品の一つ一つに己の矜持を持つ。

 

気合い

気合いが入っているかどうかが全てである。

 

 

 

 

 

事業内容候補

Facebookの子供版

リアルな出会いの触媒としてのSNS

 

自分の力を試せるサービス

自分の英語力、プレゼン力、人間力、道徳力、

プログラミング力、など。

 

冷蔵庫のiot

賞味期限等をすべて取り込めて、

事前にすべて申告してくれる。

 

 

 

 

 

 

デザイン構想

 

白ベースに黒

 

冷たいイメージ

 

キーワードは

「未来、哲学」

 

ダヴィンチがイメージにはかなりはまっている

 

鏡文字が横からどんどん流れていき、

超克

の文字が薄っすらと浮き上がってくる。

 

 

 

 

 

情報が個人に入っていき、全体で共有されてピースになっているイメージ

 

 

 

 

サービス内容

 

 

HP受託制作

あなたの「こうしたい」を理想以上の形に。

 

当社では、徹底的にあなたのつくりたいに向き合い、

一つ一つの機能にまで拘り、ユーザビリティと目的を併せて制作いたします。

私共はお仕事をさせていただくお相手をパートナーとして考え、

最後まで徹底して競創致します。

 

流れとして、

ご相談

ご提案

ご契約

デザインの決定

本番制作

納品

 

の流れとなります。

 

 

 

コスパックHP

簡単なイメージや機能等をヒアリングし、

数種類のパターンの中から選んでいただき、

手間なく、素早く、安く作成致します。

当社で全て決定し、おまかせで作成することも出来ます。

 

WP埋め込み

10P

問い合わせフォーム

オリジナルデザイン

 

25万円!!

 

 

WEBコンサルティング

 

貴社でお困りのWeb集客について、

当社でコンサルティングを行います。

当社では、ユーザーの無意識に特化して、

思い描いたユーザーに思い描く行動をさせる事を目的とし、

最も効果的な方法を提案します。

 

 

 

 

採用支援・就職支援・社員教育・研修

 

企業様向けには採用支援、社員研修、新人研修、

就職やキャリアに対する必要な考え方の講師をしております。

講義内容

キャリア形成

モチベーション向上

IT知識関連

 

講義実績

 

 

 

 

 

 

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

採用情報

フロントエンジニア・Webデザイナーを募集しております。

 

 

 

 

 

 

 

 

 人の行動をデザインする

 

企業理念

行動をデザインする

 

行動をデザインする
人は様々な制限の中で暮らしています。その制限に直面する度に人は意思決定を求められ、能力を無意識に使用しています。その無駄を削減し、個人が本来するべき行動にフォーカス出来る環境を創ります。私達は、無駄な意思決定回数を減らして「行動をデザインする」事で、未来への道を創り出します。

 

 

 

まとまったかな。

 

企業理念
<行動をデザインする>
人は様々な制限の中で暮らしています。その制限に直面する度に、人は意思決定を求められ、無意識に消耗しています。その無駄を削減し、個人が本来するべき行動にフォーカス出来る環境を創ることで、最大公約数の社会が出来ると考えています。私達は、無駄な意思決定回数を減らして「行動をデザインする」事で、未来を創ります。

 

 

 

抽象的にして、とはいえ制作やっても、ユーザーに行動喚起させますとか、サービス創っても、便利だから無意識に使える習慣に落ちて、行動デザイン出来ますよね的な流れ

 

 よし、覚書でした。

 

 

 

 

今後の注目業界について。覚書

色々とみていた中で気になったものをばっと箇条書きに。

 

1.デジタルビジネス

2018年までにデジタルビジネスは現在のビジネスプロセス上の労働者の半分を不要にする一方で、デジタルビジネスの仕事は5倍になる。例えば、冷蔵庫が自分で食料品を発注し、ECサイトロボが自動処理し、ドローンが配達するといったデジタルビジネスの新可児よって、従来の食料品の店員、配達ドライバーと言った仕事は減るのだろう。コンピューターアルゴリズムによって考案された破壊的デジタルビジネスの登場が予想されている。2018年までにビジネスを運用するためのTCO(Total cost of Ownership)は知能を持った機械や商用サービスによって30%減少するといわれている。

更に、2020年までに、ワイヤレスへのヘルスモニタリング技術によって先進国の平均寿命が0.5年伸びる。2017年までに、米国の顧客モバイル体験は米国でのモバイルコマースを拡大していき、デジタルコマースの売り上げの半分になるだろう。

2016年までにモバイルデジタルアシスタントが独自に20億ドル以上のオンラインショッピングを行う。前述の冷蔵庫が食料品を発注するようなケース。

2017年までに成功するデジタルビジネスの70%で、ビジネスモデルを顧客のニーズの変化に合うようにわざと変わりやすいプロセスにするだろう。

2017年までにコンシューマ製品への開発投資の半分は顧客体験のイノベーションへと割り振られるだろう。

2017年までに耐久消費材のEC販売業者の20%が、3Dプリントを用いてパーソナライズした商品の提供を行うだろう。

2020年までに、客の建物位置検出システムとターゲティングメッセージの活用によって、リテールビジネスの売り上げが5%上昇するだろう。

 

っていうのが、ガードナーの予想の中にあったもの。

顧客体験、カスタマーエクスペリエンスといった言葉がよく出たので、

「カスタマー・エクスペリエンス」とは、商品やサービスの購入前後のプロセスや利用時に顧客が体験する、「心地よさ」「驚き」「感動」「誇らしさ」などの、感覚的だったり感情的だったりする付加価値のこと。

感動、感覚、感情など、なかなか定量化しにくいキーワードが並ぶため明確なイメージがつかみにくいかもしれない。大げさな解釈かもしれないが、ここでは、「単に購買した/リピートしたではなく、買って良かった/とても満足した、とポジティブな感情を顧客が意識する状態まで持っていくこと」と定義できるようだ。

 

 

話を戻して。

 

医療×IT

wikiの病気についてのページは90%が間違いと言われている。

病院の長い待ち時間、病院の先生の探し方、自分にあった適切な治療法など、医療系に関してはあまりにも間違った情報や、不足している情報が多い。

 
金融×IT

近年ではFintechと呼ばれる分野で、bitコインなどもここにあたる。

1万円1枚作るのにかかる原価が約22.2円、5千円で20.7円、1,000円で16.2円かかる。

500円玉に関しては30円、100円で25円、50円玉でやっと20円で、10円玉に10円、5円玉に7円、1円には3円かかっている。

 

少しそれますが、民間の金融業者が金銀の預かり証として発行したのが紙幣の始まりです。金銀を大量に持っている金融業者が発行するために、信用され、その発行者のの信用が、20円を1万円の価値に引き上げたと言っていいでしょう。

これが社会に流通して、政府がこれを真似て発行し、政府のお墨付きになっていったわけで、世界最初の通貨は北宋の「交子」です。内陸の四川で発行されました。

当時の金融業者が商人から鉄銭を預かり、引換券として紙幣を発行し、発行額に上限を設けていましたが、政府が戦争などで上限を超えて発行することで、紙幣乱発によって通貨価値が下落し、インフレを起こし、北宋の交子、南宋の会子、元の交鈔、すべて同じ経緯で紙くずになり、「インフレ→ 農民暴動→ 王朝崩壊」という経過をたどりました。

最初に紙幣を発行したのはスウェーデン王国のカール10世で、民間のストックホルム銀行に紙幣を発行させましたが、戦費を紙幣増刷で賄おうとしたため、インフレが発生し、ストックホルム銀行は数年で倒産。その反省から、スウェーデン議会は新たにリスク銀行を設立し、国王の恣意的な支配から独立した中央銀行を作ります。

 

それたので戻ります。

不要なものをなくし、本質的に必要な通貨としての価値を他のもので担保できれば、紙や硬貨は必要なくなります。手間や維持費も大幅に削減されます。

 

 

B2B×IT

海外、販促・営業を含めたB2B領域のIT化、つまりは商社や代理店のIT化は、

そのままインターネットの本質である「中抜き」が出来るため、相性が非常に良いと感じます。

 

高齢者×IT

まだ利用率は高齢者は3割程度ですが、スマホが普及しはじめ、インターネットを当たり前に利用する世代の高齢化によって、より市場規模は拡大されるでしょう。
可処分時間も大きく、共通の趣味などでの「つながり」を求めるシニア層に向けたコミニティサービスは、スマホに最適化した形で出てくるでしょう。

 

smcb.jp

 
ビッグデータ×教育 教育×IT

学校向けASP、学校向けポータル構築、学校向けツールの提供、AR等を活用したよりリアルな学びといったことは出来ると思います。

 

ビッグデータ

ビッグデータとはインターネットの普及とIT技術の進化によって生まれた、これまで企業が扱ってきた以上に、より大容量かつ多様なデータを扱う新たな仕組みを表すもので、その特性は量、頻度(更新速度)、多様性(データの種類)によって表される。」

注意点

  • 大きなデータだからといってすべてが「ビッグデータ」ではない。
  • どんな場合でもNoSQLで処理するべきではなく、RDBMSとNoSQLは使い分ける。
  • ビッグデータとこれまでのシステムとの大きな違いは扱うデータの種類にある。

 

トレンドだけぱっと記載する。

スマホ
シェアリングエコノミー

 

動画広告
O2O
農業×ITぺたばいt
Iot
旧レーション
ウェアラブル
予約×IT
ディープラーニング
システムがデータの特徴を学習して事象の認識や分類を行う「機械学習」の手法です。 データの特徴をより深いレベルで学習し、非常に高い精度で特徴を認識できるため、人の声の認識や、カメラで撮影した画像の認識などで応用が期待されています。

ECサイトで商品を選ぶ際に、自分のイメージを伝えたいことがある。その際に、商品画像を自動的に分類し、ユーザーの好みにマッチするサンプル画像を提示し、選択しやすくしてくれる。特に服や靴の好みなど、言語による表現が難しいものに対して、非常に効果が高い」(古明地氏)

 

www.itmedia.co.jp

 

 

何にしても大事なことは、新しい体験を提供する事。

カスタマーエクスペリエンスの提供が非常に大切で、

機能が優位だということに加えて、どのような価値をユーザーに提供したかたによって当然ながら評価される。

ユーザーへの価値とは「利便性」「快適さ」といったことで、UXの考え方に近い。

ウェアラブル端末によって「人間のデータ」を取得し、Iotによって「環境データ」を取得することで、その最も効果的で効率的な「利便性」を提供出来うようになる。

 

インターネットをウェアラブルスマホで外に持ち出せるようになったように、

人間が常に何かを持ち歩けるようになること、制限をなくしていくことが、

新しい体験の提供になるのだろう。

 

まとめると、今まで経験したことのないUXを提供し、

人の制限をなくしていくことが、必要なことである。

 

 

 

 

 

 

 

 

 

 

高齢者向けWebデザインについて

今回は高齢者向けのWebデザインについて、

重要な項目やポイントを記載していきます。

 

高齢者のネット利用状況

・全体:78%

・65歳以上の高齢者:約37%

 

シニア層の傾向

・トップによく戻る

・メインビジュアルやトップページが地味なものには興味を示しにくい。

・目立つ個所に注目し、得心する傾向が強い。全体のナビやタイトル、見出しなどの細部を見て情報を探していかない。

・文字中心だと読まず、最初の部分だけ読んでいく傾向にある。文字は記号的に見ている。

・文字サイズは16px以上はないと読み飛ばす。

・行間は広く、1.8em程度取ったほうが良い

・黒背景に白文字は読みにくい

・写真が動く方が好まれ、音が出るものなども好み、動画等の受動的に情報を受け取りたい。

・カタカナは理解しづらい

・画面スクロールをせず、スクロールに気づかない。

・下にスクロール<下層ページへ移行

QRコードは使わない

・ごたごたしない、シンプルで統一感のあるデザインが好まれる

・整然としたレイアウトでは、文字は読まれる。

・一覧で見られるコンテンツが好きで、カタログ系コンテンツの需要は高い

・1画面内では2階層目でのメニュー構成(グロナビ+ローカルナビ)が限界

・高齢者の、特に男性はセンチメンタルでノスタルジックな傾向あり

主要な傾向

画面スクロールしない

画面のスクロールバー操作が苦手であることに加えて、下にコンテンツがあることに気づかないことが大きな理由としてある。

文章が多いと見落としがちだが、写真の多いコンテンツではその傾向は減る。

下へのナビや、アイコンがあればわかりやすい。

 

限られた情報を知るだけでも納得する

画面を下部にスクロールせずとも、画面スクロールしない状態で見える情報が全てと判断し、その場で離脱することが多い。

情報発信側が伝えたい情報がシニア層に届かない可能性が高いが、高齢者は「情報を得る事ができた」と納得しているケースが多い。

 

全体の構造を見て情報を探さない

感覚的に情報を探す傾向があり、全体の構造を見て情報を探すということはされにくい。つまり、グロナビ+ローカルナビが限界で、それ以外にメニューが出てくると、理解の範疇を超えてくるようです。

 

なので、伝える必要がある情報は上部に配置し、情報にメリハリをつける事を意識しましょう。

直感的に選べるラベリングをし、極力分かりやすい表現を心がける。

 

 

全体として、分かりやすくメリハリをつけて、極力一枚ものにデザインを集約していく必要があると思います。

音声付き、音楽付きの映像コンテンツを差し込み、そこに紹介をすべて詰め込め事は効果的かと思います。

つまり、高齢者のユーザーの体力を極力削らず、めんどくさがらせない為に、思考せずに感覚的に誘導してあげる事が大事です。

そういう点では、極力選択肢を減らし、誘導したいコンテンツをはっきりと目立たせ、ストーリー仕立てで、下層ページへ進めていくことが最も合理的であると考えられるのではないでしょうか。

その際には、クリックが増える分、離脱の可能性は高まるので、ロード時間を極力短くできるようにファイルを軽くし、プラスでローディング画像を配置するなど、今「今その画面がどこで、何なのか」を常にわかりやすくし、迷子にならないようにしてあげましょう。

 

 

 

 

 

 

 

 

 

 

 

ワイヤーフレームについて

今回はwebデザインに入る前に必要なワイヤーフレームについて書きます。

 

ワイヤーフレームとは?

簡単に言うと下書きの役割を果たすものです。

本番で公開するデザインの素になるもので、

ホームページの作成時はほぼ必ずといっていいほど準備するものです。

 

ワイヤー(線)とフレーム(骨組み)を語源とするワイヤーフレームは、

画面上の「どこに何を」を配置するかを示しています。

下書き、設計図と言い換える事が出来ます。

 

つまり、ワイヤーフレームは、プロジェクトに関わる人とのコミュニケーションツールとしても役立ち、クライアントさんとの間に新たなデザインを引き出すきっかけになります。

配置の場所に加えて、そこにどんな意図があるのかも書き加えると丁寧になります。

 

ワイヤーフレーム作成の流れ

1.掲載情報の整理

 必要な情報を選定し、大まかな文字数と目立たせる部分を決定していきます。

2.レイアウトの決定

 可変式のパズルのようなイメージで、必要なものを必要な所に設置します。

3.紙とペンで下書き

 2と同じ段階で進めていくのが殆どです。細かく書くより、ざっくり書きましょう。

4.ツールで清書

 

と、おまかな流れはこういった流れです。

 

1.掲載情報の整理

まずは、ワイヤーフレームに配置していく情報を纏めていきます。

 

ブレスト→ピックアップ→グルーピング→ランキング

の順で進めると、纏まりやすいです。

 

簡単に言うと、片っ端から意見を出していき、

その中から大事な情報を洗い出す。

その上で情報を同じグループごとに分けて、

重要度の高い順に並べるという流れです。

 

同じグループは同じ場所に表示する、並べて表示するなどすると見やすいですね。

優先度が高いグループ、あるいは情報ほど、基本的にワイヤーフレーム上では目立つように配置します。

不要な情報が増えるほど、そのページで伝えたい主題がぶれることになります。

 

 

websae.net

 

 

2.レイアウトを決める

纏まった情報に沿って、レイアウトを選択していきます。

レイアウトとは、「画面をどう分割するか?」といった分割方法のことです。

先にまとめた情報の量と質に合わせてレイアウトを選びます。

 

スマホ普及、PCでも色々なモニタサイズの出現など、サイトを閲覧する側の環境が多様化したので、一緒に新たな技術と結びついて、いろいろな種類のレイアウトが出てきています。

 

おしゃれで動きも派手なレイアウトに憧れて「自分も!」となりがちですが、初心者さんは、まず定番のレイアウトをマスターしていきましょう。

 

  • マルチカラム
  • シングル
  • フルスクリーン
  • タイル

 

この中でマルチカラムはカラムが複数あるレイアウトです。

カラムは画面を縦に分割した時の単位で、日本語では「列」と言えます。

縦のカラム(列)に対して、画面を横分割した単位はロー(行)と言います。

 

マルチカラムは。カラムが複数存在するレイアウトです。

カラムが2つ存在する「2カラム」、カラムが3つの場合は「3カラム」と呼びます。

 

その中での、各エリアの簡単な役割を見ていきます。

 

ヘッダー

ヘッダーは画面最上部のエリアで、

サイト訪問者の看板になっています。

 

ヘッダーはサイト訪問者の目に最初に飛び込んでくる場所で、

サイト内のどのページも共通して表示されます。

どのページにも必要な「会社名やサイト名がわかるロゴ」、「売り上げに結び付く成約ボタン」、「サイト内の各ページを行き来するナビゲーション」などを配置します。

 

ワンポイントでも美しくデザインされたロゴがあれば、ページ全体の印象を良くするように働きます。

 

お問合せや商品購入など、そのホームページに定めた目標を、訪問者が満たす行動のことを、コンバージョンと言い、お問合せへのリンクや、ショッピングカードの決済ボタン、店舗へつながる電話番号などをヘッダーに配置するのは基本です。

 

複数のページから成り立つwebサイトにとって、ナビゲーションはとても大切です。

ヘッダーに位置するメインナビゲーションは、「グローバルナビゲーション」とも呼ばれ、サイト内の主要なページへ分岐します。

 

ページ数が多く階層も深いWebサイトの場合は、グローバルナビゲーションでは上階層のページへ分岐させ、下層ページへはローカルナビゲーションとしてサイドバーへ預けるなどの工夫が必要になります。

 

コンテンツ

ページの主題を伝えるエリアで、読ませて見せるため、

文章、画像、動画、表などを駆使します。

ページを開いた瞬間に目に入る印象的な画像や動画を「アイキャッチ」と呼びます。

訪問者の興味を一瞬でひきつけることを目的とし、そのページでの滞在時間を長くしたり、成約まで導くきっかけを作ったり、重要な役割を果たします。

 

サイドバー

ナビゲーションとして利用することが多い一方で、更新情報や広告などの、掲載したいけれどもそれほど優先順位が高くない情報を掲載できるの、利用幅が広いエリアです。

 

ページ数が多く階層が深い大規模なページはヘッダーのグローバルナビゲーションだけでは足りないので、サイドバーにローカルナビゲーションを置いて補います。

 

ローカルナビゲーションは訪問者に下層ページをうまく見えてもらえることを目的にしたナビゲーションです。

 

訪問者が成約に結びつく導線を意識して、グローバルナビゲーションとローカルナビゲーションの組み合わせを工夫します。

 

フッター

画面最下部、足元のエリア。

ページの主題を伝えるのと同時に、ナビゲーション機能も持つことが出来ます。

 

しかし、場合によっては情報過多になる危険があります。

情報をどのエリアに配置するか迷ったあげく、あれもこれもと情報を掲載しすぎるのは良くないので、主題をしっかり見据えましょう。

 

シングル

カラムが一つしかないレイアウトで、サイドバーを取っ払った分、

画面幅を目いっぱいコンテンツに集中してもらいやすいレイアウトです。

 

f:id:weArt:20160830230048p:plain

このように画面全体に表示される画像などのコンテンツで構成されています。

サイドバーがない分、画面幅を目いっぱいコンテンツの領域に使えます。

 

画面を縦にスクロールする動きに合わせて、商品やサービスの特徴を語り掛けるように訴え、成約へ結びつけるタイプのランディングページによく使われるものです。

 

ですが、ナビゲーションが難しく、縦に長くなりがちなためにグローバルナビゲーションが遠くなります。ナビゲーションを配置するサイドバーもないため、ページ数が多く階層が深いホームページには不向きです。

 

ヘッダーナビゲーションが画面スクロールに追従する方法でナビゲーション機能を補うなど、画面外からスライドさせるタイプのナビゲーションも特にスマホでよく利用されています。

 
フルスクリーン

画面全体を一枚のキャンパスと見立ててコンテンツを表示するレイアウトで、

フルスクリーンといえば、スクロールなしの一枚画面で完結するページが多いですが、

セクションごとに画面を大きく覆う写真が印象的です。

 

フルスクリーンレイアウトにとって画面を覆うイメージの質は、何より重要です。

だらだらと文字で伝えるより、がっつりとイメージを活用し、気の利いたキャッチフレーズや詩的な文章を携え、ページの主題や商品・サービスの訴求ポイントを伝えましょう。

掲載情報量が少ない分、作り手のセンスが非常に重要になります。

 

タイル

画面をタイル状に分割したレイアウトです。

敷き詰めるタイルをカラフルにして丸みを与えると、

「賑やか」「やわらかい」「楽しい」雰囲気を伝えやすいものです。

 

タイル状のレイアウトは一覧性が非常に高く、

フルスクリーンとは対照的に多くの情報を一度に提供できます。

 

ネットショップの商品一覧やメディアサイトの新着ニュース一覧などに向いています。

ポートフォリオに向いていますが、一覧性が高い分、読ませるタイプのコンテンツは不向きで、情報量の多さによってページ閲覧者の注意も散漫になりやすく、興味付から成約までの導線を良く練られた物語性のあるページには向いてません。

 

下書き

ワイヤーフレームを書いていくには、

最初は紙面で書いてもいいかと思います。

紙面を先に決めたレイアウトで分割し、まとめあげた情報を配置して、途中で変更が入ることもあります。

 

逆にスペースの都合や優先順位によっては削除する情報も。

 

最初から完璧を目指そうとせずに、
書いたり消したりを繰り返しながら完成に近づけていきます。

 

情報配置のコツ

ページ閲覧者の目線、ユーザー心理を考慮して配置しましょう。

閲覧者の目線を意識すると、情報の適切な掲載場所がわかります。

訪問者の目線は「Z」を基本的には描くので、その優先順位も考えながら配置していきましょう。

 

商品やサービスの売り込み成約させるページであれば、ユーザー心理を必ず意識しましょう。情報の掲載位置にならってストーリー作り、導線を考えていきます。

 

ツールで清書

最後はワイヤーフレームを手書きしたあとは、ツールで作るのもありです。

pptやexcelで作ると、多少面倒ではありますが、互換性があるため、

他社に送った際にも基本的には先方が編集することが可能となります。

 

ですが、下記のような便利ツールは互換性はありませんが、

かなり便利で、非常に効率的に仕事を進められます。

 

新発見!Webデザインの下書きに。落書き感覚でワイヤーフレームを描ける『skitch』

Cacoo(カクー): アイデアを今すぐこのキャンバスに

 

 

 

まとめると、必要な情報を全てまとめ上げて、

キーワードとタイトルをつけ、それに優先順位を付けます。

その後に、全体のコンテンツをグループ化した際のコンテンツ数とボリュームを考え、

優先順位とボリュームを考慮して、最も効果的なレイアウトを決めて行きましょう。

 

そのレイアウトの形式を崩さずに、特徴を活かした形で、

はめ込んでいきましょう。

 

そうやって作ったものに、必要な情報を周囲に記載していき、

その部分にどんどん加筆していきながら、他の部分を記載しましょう。

 

 

 

 

 

 

 

LPについて

どうも。

表題の通り、LPについて記載していきます。

 

ランディングページとは?

直訳すると着地ページで、ユーザーが最初に訪問するWebページになります。

しかし、日本でのランディングページは狭義の意味で、使われることがほとんどで、

 

ランディングページ=ネット広告にリンク元を設置し、1ページで問合せ・資料請求・購入を促す、独立したページ。

LPOという場合も、こちらになり、高価を高める調整のことを言います。

 

下記が参考サイト。

lp-web.com

 

特徴

1.リンクがない完結型

2.縦長でスクロールが必要

3.テキストよりも画像を多用する

4.派手なデザイン

5.ボタンが大きい

役割

CV、つまりコンバージョンを得る事。

要は問い合わせを得ることを言い、不特定多数のユーザーの情報を得て、特定できるように転換する(conversion)する、ということです。

 

1.リンクがない理由

普通のwebページが、下層の目的ページへたどり着かせるのを目的としてるのと違い、

リンク先は入力フォームのみです。

 

つまり、ユーザーに選択肢を与えない、2択を強要するのがランディングページです。

 

ユーザーフレンドリーではないこのパラドックスにポイントがあります。

 

2.縦長でスクロールが必要

a.多種多様な情報を盛り込まないと、ユーザーの行動喚起できない

要はユーザーの行動を起こさせないと意味がないわけです。

「伝える」と「行動を起こさせる」ことはまったく意味が違います。

伝えるのはわかり易くすればよいのですが、

行動を起こさせるのはユーザー心理を考えることが必要です。

 

例えば、

「最初から最後までトータルサポートの、最高のお仕事紹介!」

といったキャッチコピーでは、商品が素晴らしいと聞けば聞くほど、こう思うはずです。

・面接から初仕事まで一括サポート

・あなたの特徴に合わせた、あったお仕事をご紹介

・当社だけしか紹介できないプレミアム案件も多数

 

 

「まじで?嘘っぽいなー」

これは心の作用、反作用のようなもので、素晴らしさを強調すればするほど、

この「気を付けよう」といった心理は働きます。この反作用を消すためには、客観的なエビデンスが必要になります。

 

最初から最後まで、の証拠になるよう、

フォロー体制の流れや写真を載せてイメージしてもらいます。

他にも相談者の顔写真プロフィールを載せるなどもひとつです。

 

最高のお仕事とは、だれにとってどう最高なのでしょうか?

例えば企業の名前、時給、ここだけでしか紹介できない案件であること、それを何故当社がもっているのか、どういったフォローをしているのか、といったところです。

 

このように、ユーザーの不安を一つずつ消していき、

ユーザーの不安に解決策を随時答えていく疑似会話を行っていきます。

 

b.ページを分けるとクリック率が落ちる。

リンクのクリック率は通常1~10%程度です。多くとも30%程度でしょう。

リンクを分割した瞬間に70%がそこから零れ落ちる計算です。

 

ランディングページが縦長になる理由は

・多様な情報を提供する必要があるので、コンテンツボリュームが増える

・おページを分割すれば、必然的にユーザーをロストする

 

3.テキストより画像重視

イメージ画像を多用するのもLPの特徴であり、

読みやすくするためです。

 

画像のメリットは、1舜で何を内容を伝える事ができます。

しかし、すぐ忘れがちでもあります。

 

概要を画像で伝えて、内容を見てほしいところはテキストを読ませましょう。

 

 

4.派手なデザイン

通常のページ比べるとかなり派手になります。

これはシンプルに着地力を高めるためです。

 

沢山の情報があり、最後まで見てもらいたいので、

そのような作用があるよう、心をつかむ為の、

派手目なデザインと、強烈なコピー文になります。

 

まあ、そこは当然適度にということになりますが。

 

コピーの目的は、本文を読んでもらうこと。

 

5.ボタンが大きい

シンプルに、2択を強要しているから。

ユーザーにコンバージョンさせるためにあるページですから、

そこに行かなければ何の意味もありません。

 

 

ランディングページのメリット

途中で出てきたパラドックス、ユーザーに自由を与えないにもかかわらず、

何故問い合わせを増やすのか?

 

それは、「検索ワード」が最大の理由です。

考慮すべきポイントは、ユーザーの心理です。

データ復旧、と検索する人の心理状態はどんな心理状態でしょう?

 

求めているのは早急なアドバイス、煩わしい選択肢は必要ありません。

リンクが続いて、こちらからお問い合わせくださいと出たときの心理と言ったら、

溜まったものではありません。

 

基本的にランディングページは、急いでいるユーザーに適したページです。

だからこそPPC広告からダイレクト着地で1ページで問合せを得るきわめて短い集客ラインにするわけです。

 

ランディングページは、ページに加えて、検索ワードとの相性によって本領を発揮します。

 

ランディングページはユーザーの心理を踏まえたページです。

集客は掛け算であり、LPが100点でも検索ワードが0点なら意味がないのです。

入口から出口までをフローで眺め全体の整合性が取るのは絶対です。

 

 

要は、ディレクションの段階でどれだけ詰めていられるかです。

ページを作成する意図のところで、どんなユーザーを想定しているのか、

そのユーザーが求めているすぐ知りたい情報と、

そのユーザーが引っかかるイメージ画像の選定、

そのユーザーに刺さるゴールデンワードの模索、

この辺りは絶対に必要になります。