HPを作る前に正しくDesign(計画)しよう[実践]

さいしょに

新人教育用のメモです。僕自身くそへっぽこwackデザイナーなので、おかしい点が多々あると思います。。。
指摘していただけると幸いです。
こちらは実践なので、まずは理論から。

今回は、何を作るかあまり思い浮かばなかったので私山田を『自己紹介』するHPを作りたいと思います。

1.問題設定をし、それをどのように解決するか明らかにする

まずはどのような問題に直面しているかを整理する。クライアントさんから話を聞き出し、どのような情報を伝えたいのかを明らかにする。

今回は自分自信がクライアントなので、自分に問いかけます。
『どんな風に自分を伝えたいですか？』
『ネット上で知名度が0です。だから、頭が良さように見えて、イケてる人間に見えるように。このサイトを見たらtwitterでDMしたくなるか、mailで仕事をオファーをしたくなるような感じで。』

よって、今回は 『知名度がない』という問題に対して、『頭が良さそうでイケてる人間に見えるような』デザイン(設計) とする。

2.ターゲットを定める

『どのような人に見てもらいたいか』『どのような人がみるのか』 を定める。これによってデザインの方向性がある程度決まる。

1.を鑑みるに、ターゲットは『若い女性とIT企業の人事』としましょう。本当は一つに絞った方がいいですが...。

3.データ集め

このとき注意したいのは 『この商品の強みは何か？』『弱みは何か?』 を聞き出すことだ。強みは前面に押し出す必要があり、弱みはできるだけ隠す（一概にそれがいいとは言えないが）必要があるだろう。

今回は自分自信がクライアントなので、自分に問いかけます。
『強みはなんですか？』
『......???』
『弱みはなんですか?』
『身長の低さ、食べ方が汚い、人として痛い、体型、』

というのは冗談ですが笑。一応マインドマップのような感じでたくさん自分の情報を書きました。拡大しないで

まあ強みほどではないですが、『海外旅行にまあまあ行くこととプログラミングがそこそこできること』を強みとします。

4.なんの情報を載せるか

データを集めたあとはそれを取捨選択する。基本的にユーザーがWebサイトに滞在してくれるのは数秒なので、厳選した情報だけを載せよう。その際 『どのような情報を載せるべきか？』は、一番最初に『設定した問題を解決できているか』を元に考えよう。

『人気がない』という問題に対して、『頭が良さそうでイケてる人間に見えるような』デザインを作成すると定めました。
頭が良さそうに見えるように、自分の好きな本とか思想を乗せましょう。また、イケてる人間を演出するために、たくさん画像を載せようと考えました。
また最初に述べたように、仕事をオファーしてもらうために自分のポートフォリオを乗せましょう。

5.競合調査

だいたい同じようなことを考えている人は世界にごまんといるので、似たようなWebサイトを調べる。
このとき注意したいのは、ただ綺麗か汚いかの二元論で考えるのではなく、そのWebサイトを作った人が どのような意図でデザインしたかを考える ことだ。

今回は自己紹介HPということで、有名人のHP、ないしは写真家のポートフォリオサイトを参考にしました。(参考文献参照)

6.ワイヤーフレーム(下書き)

紙に書いてもいいし、パワポかkeynoteかSketchでもいいので、デザインを下書きをする。

こんな感じか。。。

色味としては黒と白を貴重とした落ち着いたデザインを。差し色にオレンジ(暖色)を入れることで親近感を演出。また、高級感のあるフォントと細めのフォントで上品さを出した。
ちょっとまだ爪が甘くダサいが、まあ初心者レベルではこれくらいでも合格点かなと。

7.コード

コードをカキカキ。初心者はここを重要視しがちだが、実際そこまで重要ではない。

頑張りましょう。(今回は省略)

8.おしまい

お疲れ様でした。これでデザインの流れはだいたいわかったでしょうか？
あとは経験です！いろんな設計方法を考えて、スーパーデザイナーになりましょう笑。
デザインに慣れてきたら、いろんなデザイン系のイベントに行くことをおすすめします。

参考文献・参考サイト

• About Nagi Yoshida - Nagi Yoshida（ヨシダ ナギ）Official Web Site
  参考にしたというより、ただヨシダナギが好きなだけです笑。

• 嵐~ARASHI~ オフィシャルサイト / J Storm 公式
  参考にしようとしたが、素材の質が違った...