はじめに、

アプリケーションやWebサービスを提供する上でデザインは、切っても切り離せない存在です。その為、設計の時点からデザインに関して深く検討を行い、リリース後も微修正を繰り返します。

しかし、時間をかけたにもかかわらず結果的に受け入れられないものを作成してしまう事もままあります。

GrowthHackを利用する事により解決する問題だけでなく、基本的なテクニックなど色々な要因があります。これらを要因をチェックし、自サービスに活用してください。

本記事は

webmatros
Startus Interactive
Six Revisions

上記WEBサイトを翻訳し、GHJにて執筆した記事になります。

[基本編]

1:シンプルであれ
制限のあるシンプルとする事は、ユーザーに対して頭に入ってくるデザインを提供できると言える。

そして、レスポンスの良い構成になることで、ストレスなく表示される事につながる。どんなに良いデザインであったとしても、それがきっかけで重いといわれるのはNGです。

2:そのデザインに親和性があるか?
理由なく、デザインが派手なサイトや、コンセプトがサービスとマッチしていないサイトはないだろうか?ユーザーは無意識ながらも、デザインに関して評価を下す。

特に初期段階においては、ユーザーがどの様なブランドやアプリを好んでいるかなど傾向を探る事も大切である。

3:ライバルサイトを研究せよ
あなたが実施しているサイトに明確なライバルがいれば、徹底的に研究・差別化を行う事が重要だ。

デザインにおいても、似たサイトという認識をされない事や、上手なところは自己解釈の上参考にする事が重要である。

4:一気に変える事が正義ではない
季節が変われば、自分の着ている洋服を変える物である。しかし、デザインに関しては一気に変える事はよしとされない部分もある。

新しいデザインにより、新たな顧客や訪問者を獲得できる可能性もある。しかし、その反面、古いサイトに慣れ親しんだ人は、違和感を覚え離れるリスクもある。対象のサービスに対してマッチするデザインを常に行う事。

[コンセプト・設計]

5:何の作業を行うのかの宣言
デザイナーは、プログラマーと同等もしくはそれ以上に作業が発生します。

また、何の作業が完了していて、この後どの位かかるのか相手には伝わらない事がままあります。

そうした際に必要なのは、コミュニケーションです。今から○○をおこないます!という宣言までは不要ですが、開発が使っているタスク管理ツールに逐次書き込んだり、共有する事も行いましょう。

6:3つのフィールドを意識せよ
レスポンシブルデザインという用語がある。
大まかにいうと、
 ① PC
 ② モバイル
 ③ タブレット
である。
もちろん全てにおいて違和感のないページを作るのがベストだが、特にプロトタイプを作る際などでは、一気に手を出すのは危険だ。

先走りデザインをするのではなく、チームであれば方向性を合わせた上で作成をしていこう。

7:IE ? chrome ? そ・れ・と・も 全部?

ブラウザに関しては、色の見え方や構成が異なってくる。

アクセスされているブラウザのシェア率などに合わせて、設定を変更すると良いだろう。

特に、コーディング規約により見え方が変わってくる際などは、プログラマーと調整が必要だ。
BrowserStack などを活用してチェックをしよう。

8:最初に見られる画面の構成
アクセスや起動後に表示される画面によって、どれだけ正しく使われるかと行った事やこれから繰り替えし開いてもらえるかという部分が変化します。

手間にはなりますが、ここはデザイナーが率先して数種類のナビゲーションやヘルプを作成して提示すると良いでしょう。

9:デザインローカライズ
アメリカにおいてチェックマークが逆の意味を持つと行った事をご存知でしょうか?日本だとxの意味、海外であれば○の意味になります。

海外においては別の意味を持つカラーやデザインがあります。多くの国でのローカライズを目指す場合には、デザイナーも国にあったデザインを行う事を目指しましょう。

[カラーリング・フォント]

10:注目色の置き方
黄色や赤色で、期待する誘導を実施する事。

コンセプトカラーが注目の為と一致する場合には、カラーパターンを何案から作成し、実際のサイトでテストをしてみる事が重要です。

ユーザーの実績を取り込みつつ反映していきましょう。

11:フォントデザイン
フォントにより売り上げが変わる。これは、嘘の様だが、本当の話である。

フォントの太さや使うフォントの形によりユーザーによる印象・行動が変化する。これらは、10番の色の置き方と合わせて何パターンも同時にトライしてみましょう。

12:他のアプリと差別化・親和性
差別化において、他のアプリとの色の差別化・親和性は重要な問題です。

例えば、FaceBookで提供されるアプリケーションであれば、青系統の色だとタイムラインとの親和性は高いでしょう。

その反面、注目されにくくなってしまう問題もあります。また、ライバルアプリがあれば同系統の色を選ぶ時には気をつける事も重要です。

まとめ

基本・設計・色で今回は説明させていただきました。

全てに対して取り組むというのは難しいです。しかし、デザインによって人は直感的・潜在的にサービスを認識し利用します。