2017.05.13
webデザインフロー(1)インサイド→アウト ー理論編ー
こんにちは、comonoデザイナー/翻訳者の内村です。
今回は、いつもよりcomonoの業務にグッと踏み込んだシリーズをお届けしたいと思います。テーマはズバリ、「webデザインフロー」。第1回目は「インサイド・アウト」というテーマでお話ししていきます。
そもそもの問いなのですが、「いいデザイン」とは、一体なんなのでしょう?
この問いに答えるのは、意外と難しいと思います。「いい男」「いい女」って何?と聞かれると答えに窮してしまうのと同じ理由で、デザインも、その正解、不正解をはかる絶対的な物差しのようなものが存在しないからです。
きれいに整ったスキのないデザインも、裏をかえせば、「面白くない」となってしまうかもしれませんし、いわゆる「ダサい」とされる時代感のデザインが絶妙なインパクトや味になることもあり得るわけです。絶対的な正解はないし、かといって完全な間違いもない、それがデザインというものなのでしょう。
ただ、特定のデザインの持つべき「ベクトル・方向性」がはっきりすれば、その瞬間、話は変わってきます。ほら、「俺が思ういい女」「私が思ういい男」という話になると、俄然色々な意見が出てきますよね。明るい人がいいのか、クールな人がいいのか。家庭的な人か、仕事ができる人か…。
こういう「好きなタイプ」の条件とはつまるところ、自分という人間を踏まえて、それにどうマッチするのか、あるいは自分のニーズにどうミートするかということなんだと思います。「自分が何者か」がわかれば、「必要としている人物のタイプ」がわかり、それがわかれば、その必要を的確に捉えている人ほどすべからくグッドということになります。
それと同様にデザインも、「方向を持ったとき」に初めて意味を持ちます。あるクライアント様が本当に求めているのがなにか、それを達成するためにどうしたらいいのかを考え、それをうまく解決できればできるほど、「よいデザイン」ということになります。
これを踏まえると、デザインのフローで最初にすべきことが見えてきますね。つまり、そのデザインの「スタート」と「ゴール」を明確に設定することです。
Web制作の場合、「スタート」とはなんでしょうか。それは、「クライアント様のアイデンティティ」ということになります。このクライアント様は何者なのかという本質的な問いの答えを明確に知ることが、あるいは現時点で確固としたアイデンティティがないのであれば、今定義してしまうことさえ必要かもしれません。
それに対して「ゴール」は、「どう伝えるか」ということになりますが、これだけだと間口が広すぎるので、細分化しておく必要があるでしょう。考えるべき問いは例えばこんな感じです。
・「だれに」伝えるか:
年齢や性別はもちろん、その人の状況(学生?社会人?経営者?)、ライフスタイル(忙しい?家にこもりがち?)、その分野の知識レベル(初心者?マニアレベル?)、関心の高さ(無関心?関心が高い?)などを細かに設定していきます。
・「何を」伝えるか:
クライアント様の技術の高さ?人柄?エンドユーザーさんの感想?バリエーション?商品?
・「なぜ」伝えるか:
好きになってほしい、楽しんでもらいたい、理解してほしい、迷わせない、覚えてほしい、商品を売りたいなど、目的を明確にします。複数の理由があることももちろんあるでしょう。
・「いつ、どこで」伝えるか
検索エンジンで調べたとき?SNSから?アプリとして?PCの前で?外出中スマホで?ベッドでタブレットから?
このような内容を明確にします。ゴールはひとつとは限りませんが、web制作に関してはなるべく絞って、別なゴール設定がある場合は、別なランディングページ等を作成して訴求していくのもひとつの方法です。
まとめると、デザインの「インサイド→アウト」とは、自分に何ができるか、何をしたいのか、どのようにそれをするのか、というクライアント様の内面(インサイド)を捉え、それをどのような方法で伝えるか(アウトプット)、これを設定していくことになります。この方法論に基づくと、デザインに向かうべきゴールが与えられ、単なる感覚やセンスに頼った「作品」から脱却できます。これはレイアウトや配色、フォントの設定に至るまで、デザインのかかわるおよそすべての分野に大きな影響を及ぼします。
では、「インサイド→アウト」の考え方を、commonoではどのように制作に当てはめているのでしょうか。次回は実践編として、弊社が実際に手がけたサイトから、分析を進めていきます。
Relative Post 関連記事
Latest Journal 最新記事
ajaxっぽいスムーズな画面遷移の方法(2/3)
ajaxっぽいスムーズな画面遷移の方法(1/3)
スムーススクロールがうまく動かない場合の解決方法
Javascript APIでのストリートビュー実装方法
指定の範囲までついてくるフローティングバナー
View all