16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。

我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。

しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。

というわけで少々前置きが長くなりましたが、今回は昨今のスマートフォンサイトで取り入れられているUIのルールや手法、共通点などを改めて探るべく、多種多様な業界(16業界45カテゴリ)のスマートフォンサイト(150サイト)を設計の視点、デザインの視点で調査してみました。調査対象は、その業界の中でも特に多くの年代に知名度の高い企業をセレクトして調査しています。

調べるにあたって作成したスプレッドシートはこちらからご覧いただけます。

  • 1. グローバルナビゲーション
  • 2. ローカルナビゲーション
  • 3. パンくずナビゲーション
  • 4. 移動ナビゲーション
  • 5. ボタンの固定
  • 6. カルーセル
  • 7. ミニドロップダウン
  • 8. フォーム
  • 9. テーブル
  • 10. 演出の工夫

01)グローバルナビゲーション

1-1)要素別の割合

まずは調査の結果をグラフにまとめてみました。63%のサイトにハンバーガーメニューが設置されています。様々な業界の多くのスマートフォンサイトで、ハンバーガーアイコンから開くメニューは表示方法として定着していると言えます。ラベルの有無やアイコンの形についてしばしば議論になることがありますが、今回調べた中ではラベル無しの3本線アイコンが最も多いことが分かります。およそ予想通りという結果ですが、3本線のラインだけではメニューであることが分からないユーザのために「メニュー」という言葉とセットで表示しているサイトが次いで多いことにも注目すべきと言えるでしょう。位置としては右上が半数を占めています。展開方法はドロップダウン形式とドロワー形式が半々といったところでした。

1-2)右上は優先要素の配置位置

ハンバーガーメニューの表示位置は右上が過半数でしたが、逆に左上にある場合、右上にはグローバルナビゲーションよりも優先したい要素を配置している傾向があることが分かります。優先している要素はサイトによて違いがあり、ログイン、検索、カート、言語選択、サービスサイトへのリンク、番組表などがありました。

1-3)スプリングボード形式でのメニュー表示

中にはハンバーガーボタンがないサイトもありました。そういったサイトでは、利用頻度の高いメニューをスプリングボードで露出させているケースが該当します。メニューボタンを押す一手間を省き、使い勝手を向上させていると言えます。

1-4)アコーディオンとの組み合わせで検索性を向上

ドロワーやドロップダウンで展開したメニューの中で、さらにアコーディオン形式の開閉メニューを組み合わせたサイトが多く見られました。ページを遷移せずに目的へと次々辿れるところが検索しやすさを向上させていると言えます。

1-5)その他

表現の変わりダネとしては、3本線のアイコンにその企業のロゴのディティールをエッセンスとして加えてオリジナリティを出しているサイトや、更新されていることが分かるバッチをつけたサイトも見られました。

02)ローカルナビゲーション

グローバルナビゲーションほど設置位置が固定されていない印象のローカルナビゲーションですが、配置パターンとしては以下の4種類ほどがあります。使い勝手を考慮した上で決定する必要がありますが、H1下で横スライドは調べた中でもサントリーのもの1つだけでした。別のモジュールでも後述しますが、横スライドはスライドできることに気が付かない可能性がありますので、この方式を採用するのは十分な注意が必要です。

03)パンくずナビゲーション

調査した中ではパンくずナビゲーションは61%のサイトが「なし」という結果でした。PCと違って小さなスクリーンの中では、現在地がどこかを表示するよりも、他の要素の表示を優先している傾向が強いと言えます。

表現の部分では、PCサイトは通常左から右へと階層を横並びで表現するのが一般的ですが、スマートフォンサイトでは要素を縦に積んだり、スクロールできるようにしたりと、面積の狭さをうまく解消するよう工夫した表現が見られました。

04)移動ナビゲーション

スマートフォンはPCと比較してスクリーンが小さく、1スクリーン内に掲載できる要素が限らるため、目的に応じてコンテンツ間の移動を補助するためのナビゲーションが多く採用されています。

定番の「ページトップに戻る」ボタンは、最下部に設置してあるパターンが42%でした。右下に半透明固定で置く方法もありますが、ページの先頭に戻ることは大きな目的ではないこと、コンテンツエリアを隠してしまうことから不採用としているのではないかと、私は推測しています。

05)ボタンの固定

ユーザが目的とするアクションをいつでも実行することができるよう、様々なボタンをスクリーンの中に固定で表示させるサイトが多く見かけられます。まず多くの並列情報群から目的の一つを探し出すタイプのサイトでは、検索ボタンの固定が見られました。

そして最終的に購入やお問い合わせなどのアクションを起こす詳細ページにたどり着いた際には、CTAボタン自体を固定表示させる造りが多く見られました。

その他にも様々なサイトで、そのページを閲覧している際、次に何をしてほしいのか?を考慮して、様々なボタンを固定表示させています。

06)カルーセル

6-1)使われ方の幅が広がったカルーセル

狭いエリアに複数のコンテンツを効率的に見せる上で便利なカルーセル表示は、元々写真などのビジュアル要素を含むコンテンツをスライドさせて見せる傾向が強い印象でしたが、最近ではその使われ方の幅が広がりつつあるように見受けられます。まずはカテゴリをスライド式で見せる方法や、検索を補助するキーワードを複数表示するために用いられている例がありました。

また、Yahoo!ニュースのコメントやGoogleの検索結果に表示されるAMPのように、テキストを主体としたコンテンツにも最近はカルーセル表示を取り入れている事例も多々あります。

6-2)カルーセル使用時の注意点

複数のコンテンツを省スペースで見せるのに便利なカルーセルですが、採用する上で注意しなければならない点があります。それは「横にスライドできる」ということが一目で伝わらなければならないことです。一つの事例として、2015年に開始されたApple MUSICのスマートフォンサイトはメニューにカルーセルを採用していましたが、2016年にはアコーディオン方式のメニューに変更されています。これはメニューが横にスライドできることに気がつきにくいため、改修されたのではないかと推測できます。

以下の2つのサイトでは該当箇所に到達した際、横からメニューの内容がスライドしてくるアニメーションを設定して「スライドできる」ことが認識できる工夫が施されています。重要な選択肢に対してカルーセルを採用する際にはこうした「気づく」ための工夫が必須になると言えます。逆を言えば、サイトの目的達成にさほど強く関係しない要素(全て見なくても大きくは問題ない要素)に対して使用するのが望ましいと言えるでしょう。

07)ミニドロップダウン

多くの選択肢を小さなエリア内に効率的に格納できるドロップダウンメニューですが、メニューをタップした際に表示されるピッカー(画面の下半分に現れる選択肢を選ぶためのUI)で選ばせるほど多くの選択肢を含まない場合には、その場で小さなドロップダウンメニューを表示させてしまう事例があります。選択肢が少ない場合に便利な見せ方と言えます。

08)フォーム

元々スマートフォンの検索では、検索したい文字を全て入力するより前に、サジェスト結果をタップして入力の手間を省く傾向が強くあります。この特性を踏まえ、サイト内の検索フォームにサジェスト機能を備えているサイトが見かけられます。また郵便番号や電話番号など、入力する文字があらかじめ数字に限定されている場合には、数字専用キーボードを表示させる配慮を施したサイトもあります。フォームではスマートフォンの特性を踏まえ、入力を補助する施策が重要だと言えます。

09)テーブル

小さなスクリーンの中で特に多くの情報を見せなければならないテーブルは、表示方法が悩ましいUIの一つです。表示方法をスマートフォンサイト用に再レイアウトする手法もありますが、「スクロール」「ピンチアウトしてご確認ください」といった具合に、ユーザに操作してもらうことを割り切った見せ方が幾つか見られました。

10)演出の工夫

心地良い操作感や閲覧体験を実現するため、細かな演出の精度を高めたサイトが多々あります。表示に時間を要する箇所にはローディングを設定したり、操作方法を理解させるために要素を小さくアニメーションさせたり、アプリを操作するようなシームレスな画面遷移を実現したりと、様々な演出方法が追求されています。

珍しい表現、演出としては、Webフォントを使ってOSに依存しない書体を表示させたサイトや、往年のPCサイトでよく見かけた、初回読み込み時にスプラッシュイメージを表示させたサイトが見られました。

まとめ

目で見て、実際に触って、日々その流れを追うことも、UIデザインに関わる者として必要であると感じます。何気なくサイトを見続けるのではなく、いつも「何か変わったところは無いか?」と見続ける視点を養うことが、日々の制作業務の中で活きるノウハウになるのではないでしょうか。

元々社内の勉強会用に準備した今回の記事、配布用にSlideshareにもまとめとして公開していますので、よろしければ併せてご参照ください。


7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法

「ちょっと〇〇君!これワイヤーフレームそのままじゃない!」

Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。

この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。

「ビジュアルを作る力」と「情報を理解・提案する力」

ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。

ビジュアルを作る力は幅広い表現の中から適切な手法を選んで絵に落とし込む力のことで、情報を理解・提案する力は誰に・何を・どのように伝え・どうなってほしいのか?を考える力のことを指します。

これだけだと分かりにくいので、この2つの力が制作の結果にどう影響するのかを、経験度別に3人のデザイナーのモデルケースに当てはめてみたいと思います。

新入社員 Aさん

ステータス

ビジュアルを作る力 × / 情報を理解・提案する力 ×

状況

デザインの引き出しが少なく、時間内に間に合わせようとするあまり、ワイヤーフレームで簡易的に作られた絵を参考にして、デザインを仕上げてしまう。内容も深く理解せずに決められた絵を作ろうとするため、ワイヤーフレームに描かれた配置や言葉、すべてを疑うことなく正として信じ、デザインに反映する。

結果

ディレクターがパワーポイントなどで簡易的に作ったレイアウトや配置がそのままデザインに反映されるため、設計からデザインに進んだ段階でUIのクオリティが上がらない。加えて、指示された内容以上の+αの提案はないため、提案物としての全体的なクオリティも低い。

ディレクターからの一言

うーん、ワイヤーフレームのままですね。。。

経験1年目 Bさん

ステータス

ビジュアルを作る力 ◯ / 情報を理解・提案する力 △

状況

実務でさまざまな案件を担当して経験を積んだことで、ある程度柔軟に、ビジュアルを作ることができる。しかし情報設計への理解力・提案力はまだ乏しいため、ワイヤーフレームで決められた要件は満たしつつ、より最適な見せ方を提案したりはできない。

結果

絵的にはそこそこ綺麗なものに仕上げるのでとりあえず提出はできるが、情報設計への理解を踏まえたデザイナーならではのアイデアが無いため、ワイヤーフレーム設計者やクライアントの期待値を超えることができず、フィードバックが重なる。

ディレクターからの一言

えーっと、、まぁとりあえず一旦、これで提出してみますかね。ありがとうございまーす。

経験5年目 Cさん

ステータス

ビジュアルを作る力 ◎ / 情報を理解・提案する力 ◎

状況

多くのデザインの引き出しの中から、伝えたい内容に対して適切なUIの表現を選定し、綺麗なビジュアルを作ることができる。ワイヤーフレームは要素と重要度を示したものと理解した上、そこに記された内容が本当にユーザに対して伝わる内容かどうかを精査し「ユーザにとってこうあるべき」という強い主張をデザインに盛り込むことができる。

結果

ワイヤーフレーム段階では詰め切らない詳細な表現が、しっかりと作り込まれたデザインが出来上がる。また、情報設計の視点からワイヤーフレームに記された方法以外の可能性も探り、現実的な選択肢をデザインバリエーションとして作ることもできるので、提案物としてのトータルクオリティが高い。

ディレクターからの一言

ありがとうございます!!!これで提案してみます!!!

3人の能力の比較

このように「ビジュアルを作る力」と「情報を理解・提案する力」が伴うほど、ワイヤーフレームから何を読み取り、どういった表現でデザインすべきかを、柔軟かつ適切に判断できるようになります。これらが盛り込まれたデザインこそが「ワイヤーフレーム通り」でないデザインですね。

しかしながら、この2つの力は短期間で身につくものではなく、コツコツと地道に経験を積み重ねていくことで少しずつ磨かれていくものです。そういった「近道は無い」という前提はありつつも、ここからは具体的にどんな点に気を付けていけば良いのか?何をすればより早く力がつくのか?を考えてみたいと思います。

STEP(1)ビジュアルを作る力を伸ばす

2つの力が大切と伝えましたが、まず先にデザイナーに求められるのはビジュアルを作る力です。デザインの基本原則(近接・整列・コントラスト・反復)を使いこなせること、表現の引出しを増やすこと、数多くのWebサイトを見てUIの作法(セオリー・決まり・しきたり)を徹底的に身に付けることが重要です。どれも短い時間で身に付くものではありませんが「コレを意識するとより早く身につくよ」という4つのコツをご紹介したいと思います。

1)細かい要素のサイズや配置は自由に決める

ワイヤーフレームは、ナビゲーションの位置や要素の順序など、大きな要件は固められているものですが、モジュール内の細かなレイアウトまでは深く考えられていないことが多いと思います。どんなレイアウトにすれば、ユーザにとって見やすく、使いやすいUIになるのかは、デザイナーがデザインする際に自らの知見を基に考える必要があります。まずはワイヤーフレームの姿形そのままをデザインに落とし込もうとせず、これらの要素を分かりやすく伝えることができる良いレイアウト方法はないか?をゼロベースで考えてみてください。

NO GOODでは、タイトルやアイコンの位置、それぞれの要素のサイズ感など、ほぼワイヤーフレームと同じです。しかしGOODでは、電話とメールを左右に並べてバランスをとったり、メールはボタンにしたり、情報の優先度がより分かりやすいよう考慮されています。

NO GOODは要素全体が安定するよう、中央に揃えられていますが、メニューを横に並べる形はワイヤーフレームから変更されていません。GOODは情報の階層構造が分かりやすいよう文字の大きさとレイアウトを変え、メリハリをつけています。

NO GOODはワイヤーフレームのレイアウトのままで、今ひとつ魅力に欠けます。GOODは英語を大胆に配置してインパクトを出しつつ、ボタンの体裁もやめ、より洗練されたイメージにしています。このくらい思い切ってワイヤーフレームから変更しても良いのです。

2)作成するデザインの参考を必ず複数探す

UIや図版の表現方法は一つではありません。大切なのは、パッと頭の中に浮かぶ表現をすぐに採用してしまわず「もっと全体のテイストと合った表現はないか?」を粘り強く探ることです。デザインポータルやGoogle検索から自分のプロジェクトと質の近い表現を探して、作成時の参考にすると良いでしょう。それも一つだけを見るのでなく、必ず2つ以上探すのがポイントです。そうすることで、多角的にデザイン表現を考えられるようになります。

タブひとつでも様々な表現があります。吹き出し風な表現もあれば、四角の色の違いだけで表現する方法もあります。自身のプロジェクトの全体のトンマナに近いものはどういった表現でしょうか。

5つの丸をつないだ事業図を作る指示ですが、1)のように商品写真を加えてリッチに見せる方法もあれば、2)のように半透明の丸が重なり合ったシンプルなイメージも検討できます。どちらの表現がユーザに響くのか、もしくはもっと違った表現なのか、作成する前によく検討しましょう。

3)参考デザインをモジュール別に毎日クリップする

先ほどの「参考を複数探す」という話ともつながりますが、見つけたデザインはどんな手法でも構わないので必ずクリップしておきましょう。PinterestやTumblrでスクリーンショットをポストするのもアリですし、スプレッドシートにURLを蓄積して整理する方法もあります。日々コツコツとネタを貯めておくことで、いざデザインを作り始めた際に参考探しに時間を割く必要が無くなります。

例として、私は参考になりそうなモーションの表現をスプレッドシートで管理しています。一部実際のシートをこちらからご覧いただけます。

4)優れたデザインのサイトを週に1サイト模写する

模写をコツコツ続けるのが、表現の幅を広げる上で「最も効果的」です。表現の参考になるサイトのスクリーンショットをとり、それを上からトレースすることなく、テクスチャや文字のサイズなども完全再現を目標に、見比べながら、マージンを一つ一つ測りながら、全く同じものを作ってみましょう。非常に手間はかかりますが、3ヶ月続けるだけで、驚くほど自分の表現手法が増えていることに気が付くでしょう。大事なので2回言いますが、この方法が「最も効果的」です。

こちらは私が過去に模写していたものです。写真はストックフォトから似た画像を探して使っています。実際に見比べて作ることで、様々な表現手法、レイアウト感覚を体得することができます。

STEP(2)情報を理解・解釈して+αを提案する

ビジュアルを作る力を付けつつ次に意識するのは、情報を理解・解釈して+αを提案することです。+αとは、ビジュアル作りの担当範囲を超えた設計に対する提案や、インタラクションに対する提案などです。ワイヤーフレームの中の情報を解釈し、ターゲットは誰なのか、何を、どのように伝え、どうなってほしいのか?という考察に基づく提案ができると理想的です。手法は様々ですが、ここでは簡単にできる3つの実践例をご紹介します。

1)「イメージ」の内容は自分で決める

ワイヤーフレーム作成者は、隣り合う文章の内容を補足するビジュアルが欲しい、という意図でこの「イメージ」という言葉をよく用います。この時、まずはその文章をしっかりと読んで内容を理解しましょう。雰囲気や実際の様子を示す場合は写真を、関係性や数値を見せた方がユーザに伝わりやすい場合は図にするという選択肢もあります。どちらが最適かは、デザイナーが内容を読み取って判断して良いと思います。

この内容で一番伝えたいのは、見出しにもある通り「売却を先行するか、購入を先行するか」という話です。抽象的な住宅写真を用いる手もありますが、アイコンを使って関係図的に表現すると、より文章の内容が伝わりやすくなります。

2)すでに決められた文章を調整する

プロジェクトによっては文章を一文字たりとも変更してはいけないものもありますが、そうでない場合はデザイナー側から積極的に文章の変更を提案しても良いと思います。というのも、言葉は非常に重要なインターフェイスの一つなのです。ワイヤーフレームには必ずしも最適な表現が使われているわけではないことを頭に入れておきましょう。

特に重要なのは、見出しで結論を伝えることです。ユーザはその結論が自分にとって興味のある内容かどうかで、以降の内容を読み進めるかどうかを判断するため、ワイヤーフレームでその条件が満たされていない場合には積極的に提案すると良いでしょう。

ワイヤーフレームに記された文章の内容を読み取り、端的な結論を抜き出して見出しにするだけで、情報の伝わりやすさが格段に上がります。

1ブロックで伝えるには長すぎる文章も、内容を読み取って見出しをつけるだけで、読み手の負担は軽くなります。

3)最適なインタラクションを積極的に提案する

どのように情報を伝えるか?という部分でデザイナーの大きな役割になるのが、インタラクションのアイデアを出すことです。ワイヤーフレームは要素と重要度を示すものですので、インタラクションの具体的な表現まで詰められていないことが多いです。そういった場合は、デザイナーから積極的に表現を提案してみると良いでしょう。

その際は「面白そうな表現だからやってみたい」ではなく「この表現の方がユーザにとって使いやすい・分かりやすい・好まれる」という視点を大切にしてください。ユーザにとってメリットのない演出に価値はありません。デザイナーの「表現したい欲を満たす」ためでなく、「ユーザの満足を満たす」ための演出を考えられるとベストです。

こまかな説明テキストは表示を省略し、マウスオーバー時に写真の色の変化とズームを加え、さらに説明テキストが下からスライドインしてくる、というインタラクションを考えた例です。

まとめ

ワイヤーフレーム通り問題について今回はさまざまなコツや提案例をご紹介しました。結局のところ即効性のある裏技というものはなく、日々コツコツと表現の幅を広げたり、内容を真剣に読み取ろうと地道に努力することが大切ということだと、私は考えています。

デザイナー視点で考えると、「ワイヤーフレーム通りじゃん…」という指摘に対して「変えてもいい箇所、変えてはいけない箇所が判断できない」という声を挙げる人もいるでしょう。クライアントとの打ち合わせの場にも参加できず、ワイヤーフレームで決められた内容をビジュアルに落とし込むデザイナーにとって、そういう思考に走ってしまうのも無理はないと思います。

変えてよい箇所・いけない箇所を設計者に確認するのも一つの手ではあるのですが、根本的に大切なことは自分自信がユーザの目線に立ち、どういったデザインにすればユーザにとって内容が解りやすいのか?を、自分の頭で考えることなのです。その視点が備われば極端な話、ワイヤーフレームを全て変えてしまうくらいの提案をしても良いと、私は考えています。

短期間で身につく力ではない故に、毎回のデザイン制作で苦戦する人は多いと思います。しかし、野球に例えるなら、デザイナーにとってはワイヤーフレームを渡された時が、バッターボックスに入った瞬間です。その瞬間までに様々なトレーニングを重ねていなければ、華麗なヒットを打つことはできないのです。

今日から「ワイヤーフレームそのまま」と言われないためにも、ここで紹介した話を参考に、ぜひコツコツと学習を深めてもらえると幸いです。


宣伝会議タイポグラフィ実践講座(無料体験講座)での古平正義さんの話

タイポグラフィの実践講座

宣伝会議がタイポグラフィの実践講座を開催するそうで、本講座に先立って無料体験講座が4月21日に開催されていたので、参加してきました。講座の内容は、実践というよりは古平さんの実績紹介を通じ、タイポグラフィで気をつけているポイントの紹介、というスタイルでした。

自分自身の専門はオンスクリーンではありますが、文字表現の根本的な考え方は媒体に左右されるものではないので、ぜひこの機会に話を聞いてみたいと思い、参加に至りました。大きく3つほどの学びがあったので、ここでメモしておきたいと思います。

古平正義さんのプロフィール(宣伝会議のサイトより)

FLAME アートディレクター/グラフィックデザイナー。1970年大阪生まれ。アキタ・デザイン・カンを経て、97年よりフリーランス、2001年FLAME設立。主な仕事に、「ラフォーレ原宿」広告・CM、「アートフェア東京」「ローリングストーン日本版」アートディレクション、INORAN・一青窈・GLAY等のCD/DVDジャケット・ミュージックビデオ、BAO BAO ISSEY MIYAKE とのコラボレーションなど。建築のサイン計画や展覧会の会場構成等も手がけている。ONE SHOW 金賞・銀賞、D&AD Yellow Pencil、東京ADC賞など受賞。

1.文字はいじらない

講座中、一貫していたのは「文字の形自体を変えることは好まない」という話でした。その想いの裏側にあるのは、自分が美しいと思えるレベルの文字自体を作るのはとてつもなく難しい、ということへの割り切りと言えます。

文字自体を開発することよりも、既存にある美しい書体の持つ力を利用して求められる課題に対する表現を考えるところに自分の力を注いだ方が結果として効率も良いし、強いデザインになる、ということだと感じました。

文字の形自体をいじって、何かしらの面白い表現、変わった見栄え、デザインされた感を出そう、出してやる!と考えるのはデザイナーのエゴ以外の何物でもなく、本質からズレた話というのは非常に納得できる話です。

反面、自分はわりと「いじられた文字」というものが好きだったりします。それはいじられたことで、既存の書体の形では伝えることができないなにかしらのちょっとした特徴や、いびつさ、個性、といったものがチラリと見えるところに面白みを感じるからです。

確かに古平さんが言われる通り、文字の形自体を「いじる」ことはともすれば自分の知識の無さを露呈してしまいかねない非常に勇気が要る手法とも言えます。

古平さんは文字自体はいじらず、印刷技術をはじめとした+αの要素なりアイデアなりで、表現対象の個性の部分を表現する方であるように思いました。

どちらが正しいという話ではなく、どちらか一方の手法をとり続けなければならない、という話でもありませんが、文字というものはとてつもなく緻密な設計の元に作られている、ということをデザイナーは認識した上で取り扱うべき、と言えます。

2.奇をてらわない

文字組み、レイアウトでも「いじらない」マインドは一貫していると感じました。とにかく、なにかしらデザイナーの「デザインしてやった感」といった部分を出してはならない、本質ではない、という話です。

タイポグラフィ年鑑をパラパラとめくれば、不思議なレイアウトのポスターなりグラフィックなりを見かけることがあります。

おそらくそれらは作者自身のタイポグラフィ哲学を突き詰めた上での到達地点である(であってほしい)と思いますが、そこに憧れてそれっぽい表現を真似るというのは間違っている、という話だと感じました。それはいわゆる、「流行りだから取り入れる」といった考え方と同じものですね。

本質は、伝えたいメッセージをきちんと伝えること。その上で必要となる表現を選ぶこと。

ある程度経験を積んだデザイナーであれば「デザインした感」「デザイナーが作った感」といった表現がわかってきます。しかし本来そこは誰からも求められていないものです。

そこが本質ではないことをどれだけ強く自分の中で持ち続けることができるか、上辺を飾ることで楽して「デザインしました感」を出さないか、という部分にいかにストイックに向き合えるかが重要だと感じました。

3.原稿からがデザインの領域

印刷媒体であれ、オンスクリーンであれ、全てを一人で製作することは少なく、多くの場合は分業されています。しかしながら、分業される中で「自分の製作範囲はここからここまで。それ以外はお金もらってないからやらない。」といった考え方を持ってしまっては、本質に向き合う自分の行動範囲を制限してしまうことになります。

自分の担当する範囲を意識することなく、そもそもの問題は何なのか、それを解決するには何をすべきなのかを、職責や担当範囲に関わらずに考える真摯さが重要である、という話かなと思いながら話を聞いていました。

具体的な話でいうと、原稿の内容のコントロールから印刷までがデザインの領域という話で、Webデザインで言えば、原稿の内容のコントロールからブラウザに表示されるまでがデザインの領域です。

原稿を作る人は必ずしもプロではありません。おおよそがそういった原稿製作を生業としない人が忙しい通常業務の合間を縫って、本業ではない原稿を作成していたりすること多々です。

提供された原稿の裏に隠された、本来表に出さなければならないもの、表に出すことでよりその内容が伝わることは何なのかをデザイナーは注意深く探り、とらえ、表現しなければならないのだと思います。


日常生活の中に隠されていた、Webユーザビリティ10の視点

ユーザビリティ

Webサイトをデザインして、上長であるディレクターやクライアントといった第三者にそのデザインを見せた際に「これボタンに見えないよ」「綺麗だけど文字小さすぎない?」「これリンクなのかどうか分からなかった」といった指摘を受けたことは、誰しも1度は経験があるのではないでしょうか。

UXの構造やユーザビリティについての理解が浅いうちは「見た目に綺麗、カッコいい、かわいいといったビジュアルを作ること」が自分の仕事と捉えてしまい、先に挙げたような指摘を受けることが多くなります。特にユーザビリティに関する知識は、UIをデザインする上で、魅力的なビジュアルを作る能力と並行して身につけていきたい知識です。

そこで今回は経験の浅いWebデザイナーの方に向けて、ユーザビリティとは何なのか?を知る入門編として「ほんとに使える「ユーザビリティ」」という非常に読みやすい書籍をご紹介したいと思います。本書は人が生活する中で起きる身近な「使いにくさ」からユーザビリティについての視点を語り、Webサイトのユーザビリティはどうあるべきか?という流れで話が進むため、自分が作っているWebサイトが目的達成のためのツールであることを改めて認識できる内容になっています。

本エントリーでは本書の流れに沿って、ユーザビリティを「使いやすさ(実質的な面)」「優美さ・明快さ(心理的な面)」の2つの観点から、私自身の解釈と思い浮かんだ良い例・悪い例を含めてポイントをご紹介したいと思います。

Webユーザビリティ10の視点

※悪例としてピックアップしている項目は、対象ユーザや状況によって悪例にはならない場合もあります。

使いやすさ

1)機能性 ~きちんと動作する~

機能性とは、最も基本的な「きちんと動作するか?」ということです。いかにUIが美しいものでも、そもそもの目的が達成できない、実行できないものであれば、全く意味を成しません。当たり前のことのようにも思いますが、UIをデザインすることを目的に作業をすると、案外見失いがちな視点と言えるのではないでしょうか。

日常生活での悪例)

  • スイッチを入れても明かりが付かない
  • 蛇口をひねっても水が出ない
  • 呼び鈴を押しても音が鳴らない

Web上での悪例)

  • リンクをクリックすると404エラーが表示される
  • フォームに万人が持ち得ないFAXの番号が必須になっている
  • ページの読み込み時間が極端に長い

“機能性”

Amazonでは、未ログイン状態で購入手続きを進めようとすると、まずログインすることを要求されます。後々、様々な情報をフォームに入力した後で、もしもこのIDとパスワードを忘れていたらどう感じるでしょうか。

2)反応性 ~動作していることが分かる~

反応性とは、ユーザが自分のアクションに対して動作していることを理解できることです。信号を見る(視覚)、警告音を聞く(聴覚)、触るとザラザラする(触覚)、甘いと感じる(味覚)、香りを嗅ぐ(嗅覚)など、人間は五感を使って反応性を判断します。Webサイト上では、主に視覚と聴覚に対してのフィードバックを返すことで、反応性を確保することができます。

日常生活での悪例)

  • カフェで店員を呼んでも返事がない
  • キーボードのボタンを押しても押し心地がない
  • マウスをクリックしてもカチッと押した感がない

Web上での悪例)

  • ボタンにカーソルを合わせてもカーソルが指に変わらない
  • ローディング中の読み込み状況が表示されない
  • ECサイトで商品を購入した後、確認メールが届かない

反応性

ANAはボタンであれナビゲーションであれ、マウスオーバーアクションが設定されていません。使えない訳ではありませんが、反応性が重視されているとは言えないでしょう。

3)人間工学性 ~人間が自然に使える~

人間工学とは、人間の動作や特性を前提に快適な環境を目指す学問です。人に何か物事を達成してもらう時には、人間の肉体的・心理的な能力を理解した上で、自然にストレスなく目的を達成できるよう、配慮しておく必要があるのです。馴染みの深いところで言えばアーロンチェアなどが分かりやすい例ですが、Webサイトの中でもこの視点での配慮が必要になります。

日常生活での悪例)

  • テーブルと椅子の高さが合っていない飲食店のテーブル
  • スーパーの通路で2台のカートがすれ違うのにギリギリな幅しかない
  • 汗をかくと滑って握れず、文字を書きにくいボールペン

Web上での悪例)

  • ナビゲーションのクリッカブルエリアが小さすぎる
  • 入力フォームでTABキーを押しても項目間を移動できない
  • ページをスクロールしていてGoogle mapの上にカーソルが乗るとMapを拡大してしまう

人間工学性

ライオンのグローバルナビはドリルダウン形式のメニューですが、カーソルを合わせて展開されるタイミングが少しだけ遅く設定されているため、「開発STORY」にカーソルが当たってもすぐに反応しないよう配慮されています。

4)利便性 ~必要なものが必要な場所にある~

利便性とは「ユーザに必要な物が必要な時に必要なところにきちんと存在すること」「ユーザにとって手軽であること」です。綿密に設計されたカスタマージャーニーの元、その瞬間、そのシチュエーションでユーザが何を思い、何を必要としているのかをできる限り具体的に想定し、最適な選択肢を用意しておく必要があります。

日常生活での悪例)

  • スーパーの肉売り場と焼肉のタレの売り場が離れた場所にある
  • お好み焼き店に口や手をふくためのティッシュが無い
  • ホテルの部屋内の幾つかの照明スイッチがあちこちに散らばっている

Web上での悪例)

  • 主要なナビゲーションが画面上のあちこちに散らばっている
  • 掃除機の詳細ページに専用紙パック詳細ページへのリンクが無い
  • 200字までしか入力できないことがエラーが表示されるまで分からない

利便性

グリコのサイトはあるサイズではグローバルナビがハンバーガーボタンになります。ハンバーガーボタンがメニューであることに気がつかない人、ウィンドウサイズを広くするとメニューが表示されることに気がつかない人はどう感じるでしょうか。

5)万人保証性 ~正しい方向へ導く~

「人はそもそも間違えるものである」という前提に立ち、誤った使い方をしても利用者に被害が出ないよう考慮するということです。制作・設計者の想いとは裏腹に、ユーザは思わぬアクションを起こすことがありますが、そういった行動も優しく正しい方向へ導くことが求められます。

日常生活での好例)

  • 正しい向きにしか挿入できない電池ボックス
  • ドアが閉じなければ起動しない電子レンジ
  • 人が座っていないと水を噴射しない洗浄便座

Web上での好例)

  • フォームを閉じる際「入力したデータが削除されますがよろしいですか?」というアラートが出る
  • 404ページにサイト内の主要ページへのリンクが表示される
  • URLのタイプミス対策としてサブドメインでワイルドカードが設定されている

“万人保証性”

日立ソリューションズのお問い合わせフォームは、項目入力途中にページを離脱しようとすると、入力完了までの件数と、離脱すると入力内容が消えることをアラートで教えてくれるため、誤った操作をしたユーザに優しい作りと言えます。

優美さ・明快さ

6)可視性 ~きちんと見える~

可視性とは「要素が目に見えること」です。一生懸命時間をかけてUIをデザインしたとしても、それが見えない、あるいは認知できない場合、存在しないのと同じことになります。何かに隠されたり、視界にあっても認識できなかったりといったことのないよう、デザインする際に考慮する必要があります。

日常生活での悪例)

  • 車のバックミラーの角度を操作するスイッチがどこにあるか分からない
  • 調味料のラベルに書かれた調理法の上に大きな値引きシールが貼られている
  • 半分に折られたタブロイド紙。トップ記事の見出しが折られた下半分に配置されている

Web上での悪例)

  • 重要なボタンがデコレーションされすぎてバナーのように見える
  • ファーストビューで情報が完結しているように見え、スクロールできることが分からない
  • リンクテキストがリンクテキストに見えない。

“可視性”

DELLのサイトはスクロールするとウィンドウ上部に固定のナビゲーションが表示されますが、少々分厚すぎるため、コンテンツの内容を隠す面積が大きくなっています。

7)理解可能性 ~基本的理解を共有する~

理解可能性においては「使う人と作った人が同じ基本的理解を共有していること(共有参照)」が重要であると、本書の中では語られています。作り手にとっての当たり前だと考えていることも、使い手にとっては未知の領域でだったりします。その共有していない部分を、言葉・イメージ(写真や図版)・音などで補足する必要があります。

日常生活での好例)

  • バス停の電子時刻表に「あと3分で到着」と表示されている
  • お風呂のバスマットに足の形がプリントされていて、バスタオルと間違えないで済む
  • どこの国の硬貨・紙幣にも数字が大きく表示されている

Web上での好例)

  • アイコンの下にアイコンの意味を示すテキストがある
  • ECサイトの洋服で、地面に置いた写真でなく、モデルが着た写真を使っている
  • PDFへのリンクにデータ容量(⚪︎⚪︎KB)が表示されている

“理解可能性”

Tumblrのダッシュボードの右上には様々なアイコンが並んでいますが、方位磁石、笑顔、雷といったアイコンが何を意味するのか、一目見ただけで理解するのは困難でしょう。使い慣れれば分かるのかもしれませんが…。

8)論理性 ~なぜ?と思わせない~

使い手は目的が達成できない時や、達成はできるが違和感を感じる時、「なぜ?」と思います。ユーザに対して「なぜ?」と思わせるシチュエーションには、ユーザビリティ的な欠点が潜んでいると言えます。作り手は使い手に対して「なぜ?」と思わせないタスクフローを想定し、用意しておく必要があります。

日常生活での例)

  • エレベータのボタンを押しても点灯しないのはなぜ?
  • このシャンプーのキャップは手が濡れていると開けられないのはなぜ?
  • 冷蔵庫の扉は閉まっているのにピーピーと警告音が鳴り続けるのはなぜ?

Web上での例)

  • ボタンに見えるのにクリックできないのはなぜ?
  • 掃除機用の紙パックが本体と同じページに掲載されていないのはなぜ?
  • 航空券販売サイトがマイレージ番号を登録させてくれないのはなぜ?

“論理性”

楽天の商品詳細ページで購入ボタンをクリックしようとした時、先に選択しておかなければならない項目があった場合には、そのことを伝える内容が表示されます。購入できない「なぜ?」に対する答えが用意されている好例です。

9)一貫性 ~ルールを保つ~

現実世界でもWebサイトでも一貫したルールが保たれることで、ユーザは目的をより達成しやすくなります。言葉による言い回し(ラベル)が統一されているか、同じ機能を持つものは視覚的に同じものと認識できるか、世の中に広く普及しているルールとあえて違うルールにする必然性があるか、といった点を考慮する必要があります。

日常生活での悪例)

  • 1つのボタンに2つ以上の機能が備わっているテレビのリモコン
  • 開け方が分からないワインボトルの栓
  • お洒落なカフェのトイレにある水の出し方が分からない蛇口

Web上での悪例)

  • お問い合わせボタンの色や形がページや配置箇所によって変わっている
  • ナビゲーションの位置がページによって違う場所に配置されている
  • 2つの異なる機能に対して、1つの同じアイコンが使われている

“一貫性”

NHKネットクラブのログイン画面には、緑のテキストリンク、オレンジのテキストリンク、緑の強調文字が混在しています。どれがリンクでどれがリンクでないのか、一目でわかるような一貫性が保たれていません。

10)予測可能性 ~次に何が起こるか分かる~

予測可能性とは「次に何が起こるかがはっきりと分かる」ということでです。期待通りの動きをしてくれない時、ユーザは使いにくさを感じます。また、斬新さや追求するあまりに一般的な表現から外れることも、ユーザの予測から外れやすくなります。ユーザの状況を踏まえて予測するであろう答えを分かりやすく用意しておくことが大切です。

日常生活での悪例)

  • コンビニ各社のドリップコーヒーのサイズ表記に、Small・Mediam・Largeと、Regular・Largeが混在する
  • タッチパネルとモニタの下の料金ボタンを組み合わせて使う大阪地下鉄の券売機
  • 室内照明のスイッチがドアを開けたところと違う場所にある

Web上での悪例)

  • 特殊すぎる形で一般的な形からかけ離れたナビゲーション。
  • いくつステップがあるのか分からないお申し込みフォーム
  • 別ウィンドウが開くことを明示していないテキストリンクやボタン

“予測可能性”

ポカリスエットのサイトで、画像をカルーセルで切り替えられると思ったらページ自体が切り替わってしまいます。画像を切り替えたいと思っていたユーザは予想しない挙動に一瞬混乱するのではないでしょうか。

まとめ

ユーザビリティとは、日常生活の中でもWebサイトの中でも同じように存在するものです。本書を読み進める中で、自分が作り出すWebサイトにも、普段生活の中で使う道具やサービスと同じように、利用可能性や使いやすさがあることを自然と認識できるため、ユーザビリティの着眼点が身につくと思います。このエントリーの説明はあくまでも、本書の抜粋と私自身が探した事例ですので、より深く知識を身につけたい方は実際に本書の方をご参照の上で、自身が作るWebサイトにユーザビリティ的な問題点が無いかを検証してみてください。

冒頭の話題に戻りますが、絵作りだけを目的としてしまう経験の浅いWebデザイナーは、Webサイトは目的を達成するためのツールであることを、早い段階で認識し直す必要があります。分業化されて部分的な作業のみを担当する中では、最終的に手がけたWebサイトが実際に人に使われているということを想像しづらい面もあるでしょう。しかし、自分が作り出すWebサイトにも確実に使い手が存在し「このサイト便利だな」「このサイト全然使えない…」といった感情を抱いていることは事実です。

また一つ気を付けたいのは、ユーザビリティとは「誰にでも共通して使える・使いやすい」ということではない、ということです。上記で掲載している悪い例であっても、想定するユーザが容易く使える場合には、問題が無いと言えます。また使い勝手の悪さを想定した上でもビジネス的にそのように作るべき、と判断する場合もあることを心得ておきましょう。

美しいビジュアルを作る力を磨くと共に、上記で紹介したような「ユーザビリティへの理解」を深めていくことをオススメします。

“カフェで感じたユーザビリティ”

今回の冒頭のイラストは、とあるカフェで見かけた光景でした。ユーザが目的を達成しやすいのはどちらでしょう?子連れの母親だったら?学生カップルだったら?と様々な視点で考えてみると、ユーザビリティに対する視点は確実に深まります。そういった視点を養えば、おのずとWebサイトのデザインも使い勝手を考えられるようになるのではないでしょうか。


継続できないあなたが今あらためて読むべきバイブル「自助論」のススメ

自助論

誰しも人は仕事を続ける中で「昨日より今日、今日より明日、去年より今年は成長していたい」と考えると思います。デザイナー・アートディレクターであれば「もっと魅力的なデザインを作りたい」「プレゼンが上手になりたい」「後輩に効率的に自分の持つ力を伝えたい」といった願望を持つと思います。しかし、そういった将来必要になるスキルを身につけるための活動は、いかんせん目の前の忙しさにかまけてないがしろになりがちです。どうしても今、目の前の仕事をこなすことで精一杯になり、その先につながる活動を続けるまでのバイタリティが保てない…と感じる人は多いのではないでしょうか。

そんな中、昨年末に「自助論」という本に出会いました。この本は1858年にイギリスで出版されたもので、現在書店に数多く並ぶ自己啓発本の草分け的な存在と呼ばれています。日本では明治時代に出版され、当時福沢諭吉の「学問のすすめ」とともに大ベストセラーとなっており、今現在でもAmazon.co.jpのレビューで100件以上のレビューがありながらも評価の平均は4.4という高評価を得ている本です。

本書には、忙しいことや時間が無いことを言い訳にせず、どうやって自分が決めた活動を継続するのか?という問題に対してのヒントが沢山詰まっています。このエントリーでは、私自身の成長を見据える上でとても参考になった考え方、心に響いた考え方を5つ、実際の文章を抜粋してご紹介したいと思います。

(1)自助の精神を持て

どんなに立派で賢い人間でも、確かに他人から大きな恩恵を受けている。だが、本来の姿から言えば、我々は自らが自らに対して最良の援助者にならなければいけないのである。

「自らの最良の援助者」という言葉は少々回りくどい言葉ですが、言い換えれば「自分自身に投資し、自らを磨く」という意味です。上司や世間からの応援・評価を活動エネルギーの源に据えると、そういった第三者の一挙手一投足によって自分の意思が影響されがちですが、自らで自分自身に投資を続けることを活動の根源に据えると、他人からの影響は受けません。目標を達成するためには、他者を起点に置かずに自分自身にベクトルを置くべきだ、という考え方です。

もちろん「上司に認められたい」「アイツにだけは負けたく無い」といった活動エネルギーがプラスに働くこともあると思います。しかし、途切れることのない自分自身への投資こそが、自分自身への最大の応援になるという考え方は、自分が掲げる目標に向かう上で非常に理にかなった考え方だと感じます。

(2)結果は必ず努力の上に成り立つもの

人間の優劣は、その人がどれだけ精一杯努力してきたかで決まる。怠け者はどんな分野にしろ、すぐれた業績を上げることなど到底できない。骨身を惜しまず学び働く以外に、自分をみがき、知性を向上させ、ビジネスに成功する道はない。

当たり前な話で、言葉にすると「ただの正論」と思う方もおられると思いますが、やはり生きることの基本として「努力」は非常に大きな力がある、という話が強く語られています。

書籍全般を通じて様々な偉人の実例が語られているのですが、誰一人として楽をして結果を出した人は登場しません。血の滲む努力と多くの時間を費やすることを覚悟し(もしくは自然とそのように行動し)、自分の生き方に真っ向から向き合ってこそ、人間の優劣は決まるものだと説いています。努力することもなく結果を求めるような都合の良い考え方は通用しない、と言い換えることもできます。

(3)勤勉の習慣を身につけよ

最大限の努力を払ってでも勤勉の習慣を身につけなければならない。それさえできれば、何ごとにおいても進歩や上達は目に見えて早くなるだろう。

人は学び続けることで人格が磨かれるという話です。30歳を超えてある程度キャリアを重ねてきた人であれば、自分自身のそれまでの経験を活かしてそれなりの活動を続けることはできると思います。しかし、今以上に活動の幅を広げたり、新しい目標を達成したいと考えるのであれば、やはり基本に立ち戻って新たな物事を学ぶ姿勢を持たなければ、前に進むことはできません。

またその勤勉自体の重要性と合わせて「学び方」についても参考になる節が幾つかあります。

単なる知識の所有は、知恵や理解力の体得とは全くの別物だ。知恵や理解力は読書よりもはるかに高度な訓練を通じてのみ得られる。一方、読書から知識を吸収するのは、他人の思考をうのみにするようなもので、自分の考えを積極的に発展させようとする姿勢とは大違いだ。

読書を自己啓発の手段と思い込んでいる人は多い。だが実際には、本を読んで時間をつぶしているだけの話だ。

自分自身が勉強すれば、その内容についての印象はいつまでも鮮明に残る。人から与えられた不十分な情報とは違って脳裏にはっきりと刻み込まれる。

ネット上でバズっている記事や専門書籍を読んだりすること、セミナーなどで著名人の話を聞きに行ってみたりすることは、さも自分が勉強しているような気分になりがちなのですが、実のところ、それ自体には本来意味が無いことを語っていると思います。重要なのは、それらをヒントに自分自身の環境に置き換えて考えてみたり、調べてみたり、実行してみたりといったアクションにまで結びつけることが、真に有益な学びである、という話だと感じました。

(4)克己心(こっきしん)を養え

自分の悪習をわずかでも改めるより、国家や教会を改めるほうが簡単だと思い込みがちだ。一般的にいって、人は自らの非を直すより隣人の非をあげつらうほうが、よほど好みにあっているようである。

克己心(こっきしん)とは、自分の欲望を抑える心です。人は往々にして、自分自身の行動を改めずに環境のせいにしたり、自分自身で決めたことをなにがしの理由をつけてやらなくなったりします。しかし自助論では、自分の将来の利益のために現在の満足を犠牲にする、という克己の精神が大切であることが語られています。また大切であることを語る反面、その克己の精神を身につけることは非常に難しいとも説いています。栄光や成功は、弱い自分の心に打ち勝ち続けてこそ得られるものであるということが分かります。

(5)修練無くして結果なし

ある時、ベネチアの貴族がミケランジェロに自分の胸像作成を依頼したところ、ミケランジェロはそれを10日で仕上げ、代金として金貨50枚を請求した。貴族は「たかが10日で仕上げた作品にしては法外な代金だ」と抗議したが、ミケランジェロはそれに対し「あなたはお忘れです、胸像を10日で作れるようになるまでに、私が30年間修行を積んできたということを」と答えた。

イタリアの彫刻家、ミケランジェロの非常にキャッチーなこのエピソードは、ネット上で見かけた方も多いのではないでしょうか。圧倒的な成果を残す人は必ずどこかでその成果にたどり着くための努力をしているものだ、という話がこの他にもいくつも紹介されています。先ほどの克己心とも重なる部分ですが、大きな成果を残す人は自らの弱い意思を制御し、コツコツとした努力を続けた事実が必ずあります。前回の記事で、上手なプレゼンテーションを行う際にも地道な練習が必要という話を挙げましたが、まさにこの話に通ずる部分があると感じました。

当たり前のことを当たり前にやる大切さ

書かれている内容は、斜めから読めば「正論」「きれいごと」「当たり前」と捉える人もいるでしょう。事実として中で紹介される実例は、2016年を生きる私たちの社会の環境にそのまま置き換えてみると、うまく当てはまらないものも多少はあります。加えて昨今の自己啓発本にあるような、具体的な行動パターンの変化を促すような実例もありません。しかし上記で紹介した考え方は、明日から使えるTIPSのような話があふれる現在、そういった上辺のテクニックに流されずに改めて大切にすべきこと、生きることの基本として心得る話だと私は感じました。

自助論は、当たり前のことを当たり前にやることが大切ということを、淡々と語りかけてくる本です。この本が出版されたのが今から150年以上も前の話。その当時から今に至るまで、世界中で永く読み継がれてきたと考えると、人の生き方とは?活動する意味とは?という大きなテーマに対して、普遍的で時代に流されない、数々のヒントやエッセンスが詰まっているのではないかと思います。

自分の成長に壁を感じる人にとっては、非常に得るものが多い書籍なのではないかと思います。私自身はこの自助論の内容を、改めて自分自身の活動の中での基本として据えておきたいと感じました。


地味だけど効果がある、デザインのプレゼンテーションスキルを上げる8つのコツ

デザインのプレゼンテーションスキルを確実に上げる8つのコツ

デザイナーは成長する中で、デザイン自体を作る力に加え、そのデザインを第三者に説明するプレゼンテーションの能力が求められるようになります。自分自身でデザインを作っている時には、頭の中だけで、そして自分自身の中だけでその説明が完結していれば良いのですが、いざ第三者に分かりやすく、言葉で伝えるシチュエーションになった時、しどろもどろになった経験を持つ人も多いのではないでしょうか。今回はそんなプレゼンテーションに必要な準備やコツといったところを、制作のフローの部分から照らし合せてまとめてみたいと思います。

デザイン制作時

(1)なぜそのデザインにしたのかを書き出そう

デザインを作成している際、「○○を表現するためにここの配色は○○にする」「○○な制約があるのでここは○○にしよう」といった判断をしているはずです。しかし、制作中は自分の頭の中だけでその考えが完結していれば良いので、わざわざ言葉にしておくようなことはしないでしょう。しかしながら、実はこれがいざ第三者に説明する際にスラスラと言葉が出てこない原因と言えるのです。頭の中で考えていることと、言葉に出して説明することには、大きな差があります。そのデザインがなぜその形であるべきなのか、その色であるべきなのかを自分の中で整理し、箇条書き程度でも文章でまとめるところまで落とし込めていれば、口頭で説明する際にはその言葉を思い出すことができます。もちろん慣れれば、わざわざ文章に書き出す必要もなく聞き手に説明できるレベルに到達しますが、なかなか人前でスラスラと言葉が出てこない人は、きちんと文章を作ってメモしておく、といった行動をとっておくべきでしょう。

プレゼンテーション前

(2)伝える内容とその背景を深く理解しよう

プレゼンテーション時には、作成したデザインに対する説明以外にも、現在のUIデザインにおけるトレンドやユーザビリティに関する知識、配色に関する知識、テクニカルな知識まで、聞き手からの質問に対してその場その場で自分の引き出しを開けて、説明できなければなりません。一夜漬けで提案書の中身だけを説明できるように頭に入れたとしても、説明が終わった後に実のある議論を展開することはできないでしょう。そのためにも、日々自分の関わる専門知識を深く理解し、人に説明できるレベルにまで引き上げておく必要があります。たとえば、誰かが書いた専門的な記事を読んで「ふーんなるほど」と思っているだけではこの力は強化されません。日々、書く、話す、といった行動が伴って、自分の筋肉となってプレゼン時の自分を支えてくれるものだと言えます。

(3)声に出して練習しよう

とても基本的なことですが、実際に声に出して話す練習をすることが、プレゼンテーション時の緊張を何より和らげる対策の一つです。かの素晴らしいプレゼンで世間をアッと言わせ続けたスティーブ・ジョブズも、声に出して何度もプレゼンテーションのリハーサルを重ねていたことは、ネット上の様々な記事でも見られる有名な話です。プレゼンテーションで緊張して言葉がスラスラと出ない人ほど、実は練習をしていない人が多いようです。デザインを作っている時には自分の頭の中で説明を考えているので、それをそのまま話せば良いという話しなのですが、いざ人前に立つと緊張して頭が真っ白になることは誰もが経験することです。そんな時でも練習を重ねていれば、ふとした拍子にその練習を思い出し、説明を続けることができるのです。また、練習は自分のプレゼンテーションにおける欠点を知るためにもとても有効です。きちんと人に伝わる声を出せているか、自信をもった話し方ができているか、ごまかしたような説明になっていないかなど、多くの改善ポイントを知ることができます。一度自分の説明音声を録音し、客観的に聞き直すのも非常に効果的です。

プレゼンテーション時

(4)説明資料は読まないようにしよう

プレゼン時には説明資料などを作成して自分と聞き手の手元に置き、その資料を一緒に見ながら説明することが多くあると思います。その際、資料の中に書かれている文字をそのまま読むような説明は、聞き手にとっては非常に退屈で、心に響かない説明になります。プレゼテーションの場では資料にある内容を、資料の中の言葉とは別の言葉で説明すると良いでしょう。見出しなどのポイントとなる部分だけは読んでもかまいませんが、その詳しい内容については細かい文章は追わず、自分自身の言葉の引き出しから説明すると、聞き手に伝わりやすい説明になります。

(5)例を話そう

資料の中に書いてある言葉以外で何を話せば良いのか?という話ですが、その際には「他社さんの例では…」「私の経験では…」といった具合に、実際の体験談や事例話すことも有効です。資料の中の話だけではない、別の角度でその内容を見つめることができ、かつ聞き手と似た会社や人、業務の人であれば、グッと理解が深まります。

(6)「伝えること」を目的にしないようにしよう

プレゼンテーション初心者が陥る落とし穴として、目的が「相手に内容を伝えること」にすり替わることがあります。気合いを入れて作ったプレゼン資料を読み込み、ここではこう説明しよう、ここではこの例題を話そうなど、色々と考えてプレゼンに臨むと思いますが、「相手に内容を伝えること」を最終目的にしてしまうと、説明を終えたところで燃え尽きてしまいまい、その後のディスカッションが有意義なものにならないという本末転倒な結果を招くことがあります。プレゼンテーションで重要なのは、聞き手の意思決定を促すことです。そのためには、目先の「相手に内容を伝えること」に焦点を当てるのではなく、プロジェクト全体の中での何のためのプレゼンテーションなのか?という部分を理解し、それを説明前に聞き手にも共有した上で、最終的な意思決定につなぐ流れを意識する必要があります。デザインの説明であれば、最終的にそのデザインのどこが良くて、ダメな部分はどこで、どのようにブラッシュアップするのかを、プレゼン後にきちんと聞き手と共有できているかどうかがポイントになります。

(7)話す時間のバランスを考えよう

プレゼンテーションの時間は限られています。1時間の会議のうち、40分がデザインプレゼンテーションで使える場合、説明に30分を使ってしまうと、議論に残された時間は10分と少なくなり、結果的にその場で話が進まないまま終了、もしくは次回へと持ち越しとなってしまいます。説明する内容にもよりますが、その内容はどのくらいの時間を使って説明するべきなのか?を考えておく必要があります。また聞き手の認識のレベルに応じて「ここはそんなに時間をかけて話さなくても良い」という判断ができると、さらにプレゼンテーションの時間を有効に使うことができるでしょう。

プレゼンテーション終了後

(8)失敗した点を記録しよう

私はプレゼンテーションを行った日は、決まってそのプレゼンテーションはどんな点が良かったのか、どんな点が悪かったのか、次回どこを改善しなければならないのか、を記録するようにしています。また、プレゼンテーションに参加していた人(同僚など)にも協力してもらい、自分自身のプレゼンテーションを客観的に見直すようにしています。そうすることで、回を重ねるごとに自分の弱点は補われ、徐々にプレゼンテーションに慣れていくのだと思います。

まとめ

プレゼンテーションのコツは「場慣れ」という話があります。これは誰もが口にする話で、回数を重ねるごとに自分の欠点に気が付き、改善されていくので間違いではありません。私自身も何度も失敗し、「次こそは」と思うにつれて少しずつ進歩していった経験があります。しかし、ただただ回数を重ねるだけよりも、具体的な改善ポイントを自分で把握して対策を立て、改善を試みる方が、効率的に上達を早めることだと気が付いた時、上記のようなポイントを自分なりにまとめてみることが重要だと思いました。自分自身の日頃の行動を客観的に見て、上手なプレゼンテーターとどこが違うのか?を考えてみるのが、上達への近道だと私は思います。


今さら聞けない!?正しいマテリアルデザインとの付き合い方

マテリアルデザインとの正しい付き合い方

Googleの新しいデザインガイドラインとして先ごろ発表された「マテリアルデザイン」。早速この新しいトレンドを取り入れた事例や、スムーズに導入するためのフレームワークが紹介されたりするのを見かけますが、UIの開発に携わるクリエイターとしては、取り入れる前にその思想をしっかりと理解しておく必要があります。というわけで、思想の背景やデザインのポイント、注意点をまとめてみました。

マテリアルデザインが定義された背景

Googleの生み出すサービスは、もはやスマートフォンやタブレットやPC(Android OS)だけに限られたものではなく、腕時計やメガネといったウェアラブル(Google glass、Google Fit)、ハンズオンでの操作を可能にする自動車用システム(Android Auto)などなど、様々な分野に広がっています。

今後も更に様々なスクリーン環境、操作環境が増え続けるのは確実です。そこで、誰もが迷うことなく、尚且つどんな環境でも一貫したブランドを正確に分かりやすく伝えるUIを作成するための、根本的な思想を定義する必要がありました。そこで大きく、ビジュアル・モーション・インタラクションに分けてガイドラインとして定めたものが、マテリアルデザインと呼ばれるものです。

マテリアルデザインの哲学

Googleのデザイン担当ヴァイスプレジデントであるマティアス・デュアルテ氏へのインタビューがGizmodoに掲載されていますが、これを読むとマテリアルデザインの根本に流れる哲学を知ることができます。思想の源にあるのは「我々が生きている実在の世界にある物理的なルールをインターフェイスの中に取り入れ、考えることの負担を軽くする」ということです。

我々人間は生きている中で自然とこの現実世界のルールを学んでいます。光が当たっているものには影が付くというルール、ボールが転がると最初は勢いがあって最後はゆっくり止まるというルール、水面に何かが落ちれば波紋が広がるというルール。こういった現実世界のルールは我々がこの世に生きている以上は変わらないルールです。しかし、新しいOSや様々なサイズのスクリーン、数々のアプリケーションが増え続けるデバイスの世界においては、それぞれに独自のルールが適用されることが多々あります。そんな時に我々は「これはどう操作すればいいんだろう?」と悩んでしまうのです。

ここに現実世界にあるマテリアル(素材)という一定のルールを用いることで「考えることの負担を軽くする」というのがマテリアルデザインの哲学です。現実世界と同じく、触れるものには影があり、物が動く時には慣性があり、物は連続的に動いて消えたりしない、という法則をうまく利用することが、操作しやすいインターフェイスに繋がるということです。

ビジュアル・アニメーション・インタラクションの特徴

マテリアルデザインとの正しい付き合い方

ここまで読み解くと、appleのiOS6まで継続されてきたデザインのテイストであるスキュアモーフィズム(現実世界にある物の質感を取り込んだ視覚的なデザイン)と同じようにも聞こえますが、マテリアルデザインの一番の大きな違いは「脳が判断するのに必要とする分だけの、最低限のルールを利用する」ことと言えます。

ガラスでできたようなギラリとした光沢が無くても、うっすらとした影が付いたものがあるだけで、人はそれを「押せるボタン」と認識することができます。現実世界をそっくりそのまま再現するのではなく、理解に必要なルールを必要な分だけ取り入れるのが、マテリアルデザインの考え方と言えるでしょう。

少し気をつけておきたいのは、マテリアルデザインは根源となるルールをできるだけ分かりやすく定義するために、見た目をシンプルにすることに注力しています。今後また色々と環境が変わる中で、今とは違った見た目に変わるようなことも可能性としてゼロではないでしょう。ですから「フラットな面に少し影が付いて、キーカラー+グレーの配色で、クリックすると波紋が広がっているデザインがマテリアルデザイン」と、安易に解釈するのは危険です。変わらないのは、脳の判断を補助する最低限のルールを適用することと言えます。

アニメーションやインタラクションについてもビジュアルと同じく「脳が判断するのに必要とする分だけの最低限のルール」という考え方は共通しています。何かを操作している時に急に物が消えたり、違う場所に移動したりして「あれどこ行った? あ、ここか…」とならないために、アニメーションを利用するとあります。

ブランドが変わればデザインは変わる

違うブランドや会社でも同じ「マテリアル」の枠組みを使えるはずですが、会社が変われば違う使い方になる。

インタビューの中で注目すべき点として、こんな発言があります。この思想を私たちデザイナーやデベロッパーは深く認識しておく必要があります。

簡単に言うと、今Googleのサービスで適用されているマテリアルデザインは、Googleというブランドに最適化されたものであるということです。明るい楽観的な色使いや楽しくポップなアニメーションはまさにGoogleのブランドイメージ。ですから、今Googleのサービスに適用されているデザインをそっくりそのまま真似ると、Googleのブランドイメージになってしまうのです。

もちろん、定義されているグリッドシステムやカラースキームの使い方を闇雲に変えるのも間違っていますが、安易に出来映えだけを模すことは、マテリアルデザインの正しい使い方とは言えません。ブランドのイメージを適切に伝えるために、Googleが定義したグリッドシステムやカラースキームが使えるのであれば、そこはうまく利用するのが良いと思います。

最も優先すべきなのは、そのブランドが持つイメージを適切に伝えることであり、そこにマテリアルデザインの思想を適用するというのが正しい順序です。マテリアルデザインの哲学を抑えつつユーザ体験に一貫性を作りながら、如何にしてそのブランドのイメージを向上させるかが、マテリアルデザインとの正しい接し方だということを作り手として認識しておくべきでしょう。

…と、色々と思うところを述べてみましたが、私自身はこのデザインはとても良いなと感じています。マネーフォワードのデザインにマテリアルデザインを適用した例が先日紹介されていましたが、適用後は非常に洗練された印象になっていました。自分自身の制作の中にも、この考え方をうまく取り入れることにチャレンジしてみたいなと感じました。


デザイナーの成長を大きく左右する「技術力」以外に必要なもう一つの力

デザイナーにとって技術力以外に必要な力とは?

ネット上に溢れ返る「技術力」のヒント

昨今のネット上には、デザイン制作のTIPSやテクニック、フリーの素材やツールをまとめた記事が毎日のようにアップされ続けています。私が働きはじめた2002年の頃はそういったネット上での情報は今ほど豊富ではなく、デザイナーにとっては手軽に有益な情報を得られる便利な時代になったと感じます。

なぜ我々はこういった情報を収集し続けるのか?と考えてみると、それはひとえに「デザインが上手くなりたい」という想いがあるからと言えます。一目見ただけで心を惹き付けて離さないデザイン。デザインの力と魅力を知っているからこそ、その力を自分でも発揮したいと思い、我々は日々自分自身のデザインの腕を磨いているのだと思います。

私もデザイナーとして12年間働いていますが、常に「デザインが上手くなりたい」と考え続けてきました。しかしここ数年で、デザイン力をアップさせるためにはそういったTIPSやテクニック、いわゆる「技術力」を追うだけでは、デザイナーとしての成長に限界があると感じるようになりました。

ヤマアラシのジレンマ

では技術力意外に必要なものとは何でしょう?最近読んだ本、田坂広志著「仕事の思想」の中に、ドイツの哲学者ショーペンハウエルが残した寓話「ヤマアラシのジレンマ」という話が紹介されています。技術力以外に必要な力はこの話の中にヒントがありますので、その一節をご紹介します。

「あるところに2匹のヤマアラシが住んでいました。冬の朝とても寒いので、2匹のヤマアラシは互いに暖め合おうとして身を寄せ合いました。しかしあまりに近くに身を寄せ合ったため、2匹のヤマアラシは自分の体に生えている針によって互いに相手を傷つけてしまいました。その痛みで互いに相手から離れたのですが、今度はまた寒くてたまらなくなりました。そこで再び身を寄せ合おうとしますが、また互いを自分の針で相手を傷つけてしまうのです。こうして2匹のヤマアラシは、離れたり近づいたりすることを繰り返し、ついに最適な距離を見つけ出したのです。現代の職場においては、このショーペンハウエルが示す寓話「ヤマアラシのジレンマ」が溢れています。」

デザイナーにとってもう一つの大切な力「人間力」

この話をデザイナーの職場に置き換えてみましょう。デザイナー自身が1匹目のヤマアラシだとすると、2匹目のヤマアラシは上司や部下、お客様といった、デザインを共に作り上げる上での仲間たちと言えます。

そいった相手と共に良いデザイン、話の中の言葉で言うなら「最適な距離」を見つけ出そうとすると、互いに対話を重ねて正直な意見をぶつけ合うこと、話の中の言葉で言うなら「身を寄せ合うこと」が必要になります。対話を重ねるのには大きなエネルギーを要します。時に互いの意見に納得がいかず、悶々とすることもあるでしょう。話の中の言葉で言うなら「体の針で相手を傷つけること」と言えます。

デザインの現場で意見が食い違った時、自分の意見を否定された時、「コイツは俺のデザインを分かってない」「分かってない人と話を続けても仕方がない」「もう面倒くさいから言われた通りにやるか…」と、自ら相手との距離をとってしまうと、話の中で言う「最適な距離」を見つけられず、寒くて凍えてしまうでしょう。

そういった意見が食い違う状況であっても、「この人の言葉の裏に隠れた想いは何だろう?」「自分の方に何らかの配慮が足りないんじゃないか?」「ここは一歩自分の方が歩み寄ってみよう」という具合に、互いが暖かく感じる最適な距離を探し続けるための行動が、デザイナーには求められます。時にトゲトゲと痛みを伴う歩みよりにも屈しない精神的な強さ、この本の中ではこれを「人間力」と呼んでいます。

技術力と人間力がデザイナーの総合力

最初に述べた「技術力」に加えて、この「人間力」が伴わなければ、デザイナーとしての成長はある段階で止まり、伸び悩むことになります。人間力が伴うことで、様々な困難な状況を一生懸命乗り越えて、お客様や自分のチーム、皆が暖かくなるデザインを作り出すことができるのだと思います。…と、ここまでデザイナーの話に例えてきましたが、そもそものところで言うとこの話はどんな仕事にも共通していることとも言えそうです。

デザイン力をアップしたいと日々考えている方には、「技術力」の強化とともに、この「人間力」の強化についての考えを深めることを意識すると良いと思います。


デザイナーが「文章を書くこと」とは?

デザイナーが「文章を書くこと」とは?

元々文章を書くことは嫌いではないのですが、数年前までは必要に迫られなければ、文章を書くという機会を意識的に増やすことはありませんでした。しかし、ここ数年はその機会を増やすようにしていて、そういえば滅多に更新していない自分のブログがあったと思い出したので、手始めにその「書くということ」について書いてみたいと思います。

「考えている」にもレベルがある

まずここ数年で、なぜ文章を書くことが重要だと思ったのか?という話ですが、一番の理由は「人にスラスラ説明するためには、頭の中で考えていてもまとまっていないことがあるから」だと考えています。私の職業はデザイナーですので、デザインのアイデアなんかを頭の中でもやもやと練っていても、いざ人に「それってどんな表現?」と聞かれてスムーズに言葉にできないのは致命的な欠点と言えます。

「考えている」という言葉にもレベルがあり、伝えたいことがまとまっていなくて考え中の状態でも「考えている」と言えますし、第三者に分かりやすくスムーズな言葉で伝えることができるレベルでも「考えている」の範囲に入ります。人に何かを伝える時に必要なのは、もちろん後者の考えの深さです。

人によっては、特に文章に書き出すようなことをしなくてもスラスラと説明できる人もいるでしょう。しかし「説明してください」と言われてスムーズに論じることができない人もいます。それは、「考える」というレベルの深さに違いがあると私は考えています。

文章を書くことで自分を客観視できる

一番の理由はそんなところなのですが、文章を書くことにはその他にも「自分の思いを改めて客観的に見ることができる」というメリットもあります。一旦文章にまとめることで、脳から外部メモリに保存できます。忘れたころにでもその文章を見直せば、その時の自分自身を考えを客観的に見つめることができます。こうして自分自身を客観視する手法としても、文章書くことは良いことだと思います。

所属しているbaigieでは、毎日の終わりに日報という形で自分の想いを文章にまとめているのですが、元々文章を書くことが嫌いではない自分にとっては、自分の考えをアウトプットする上での良い鍛錬になっていると感じています。ちなみに書き始めた3年ほど前の文章を見返してみると、事務的な作業報告のような文章でした。しかし書き続けることで、自然と自分の考えをまとめて整理する機会に使う方向にシフトしていったようです。

考えを人に説明できるレベルまでまとめれば、人に対して自信をもって主張することができます。どんな職業でも、自分の考えをきちんと主張するということは大切なことです。その主張の土台作りのためにも、文章を書くことは非常に有効な鍛錬なのではないかと感じています。

このブログも元々は、文章を書いて考えをまとめて定期的に発信していくことで、自分自身の思考を形作って行くことを目的にしていました。しかし長文を書こう、と意識するあまりに更新頻度が減ってハードルが高くなり、結果的にあまり活用できていませんでした。もっともっと自分の思考を形作っていくために、文章にまとめる機会として活用したいと思います。

ちなみに私のbaigieでの日報はこんな感じです。


ウェブデザインに応用するデザインの4つの基本原則

ウェブデザインに応用するデザインの4つの基本原則

根本的な考え方の指針となる、デザインの4つの基本原則

あなたは後輩のデザイナーにどのようにデザインを指導していますか?または、先輩デザイナーからどういった指導を受けましたか?その時、どんなことが指針になりましたか?

私の所属するbaigieは先日オフィス拡張のための引越しを終え、新しいスタッフを迎え入れる体制が整いました。今後は新たなデザイナーの方を迎えて、制作の体制をさらに強化していく予定です。ここで冒頭でも触れた件ですが、先輩であるデザイナーは後から入った後輩に説得力をもって「デザインとはこうあるべきだよ」という説明ができなければなりません。

「なんとなくこっちの方がかっこいいでしょ?」「これは俺の経験から見てナシだなあ」といった具合に、論理的な説得力が無い説明で伝えても、それは後輩デザイナーに間違ったデザインの考え方を植え付け、その場しのぎの考え方を周囲にまで蔓延させることにもつながります。

私がここで大切にしている考え方の一つとして「デザインの4つの基本原則」があります。既にネット上では多くのまとめが存在していてご存知の方も多いと思いますが、この原則はウェブサイトのデザインを作る際にも非常に重要な考え方の指標になります。今回は「ウェブサイトのデザイン」に4つの基本原則を応用した際にどうなるのかを紐解いて、ポイントとなる部分をスライドにまとめてみました。

原則を共有する強み

基本原則をスタッフの間で共有することで、考えの源に共通の「考え方の根」ができます。同じ根から派生した思考の枝葉は、大きい・小さいといった違いはあれど、まったく違った形に生まれることはありません。逆にまったく違った姿形の枝葉を同じ形にそろえるには、相当なコミュニケーションと互いの歩み寄りが必要になります。多くのスタッフで共に仕事を進める際には、早い段階でこういった原則をしっかりと共有しておくことが、のちのちの大きなコミュニケーションコストの削減にもつながると思います。

というわけでこの機会に改めて、デザインの4つの基本原則をしっかりと見つめ直してみてはいかがでしょうか。

ウェブデザイナー募集のお知らせ

最後にお知らせですが、私の所属するbaigieで一緒に働くウェブデザイナーを募集しています。もちろん、上記のような基本原則もしっかりと共有したいと考えています。募集要項を読んで興味を持たれた方はぜひぜひご応募ください。

株式会社ベイジの採用情報