webデザイン初学者が初めて一からwebサイトをつくった時の話
初学者（私）がwebデザインのスクールに通いながら実際のwebサイト制作を通じてぶつかったことや考えたことをまとめてみました。
自分の備忘録の意味が9割と、これから初めてwebサイト制作をする、という方の参考になったらいいなあという気持ちが1割です。
ちなみにつくったのはこの美容院のサイト。友達がやってるお店という色眼鏡抜きにしても、すごく気に入っていて今でも1時間かけて行ってます。近い方はぜひ行ってみてください（宣伝）
企画書作成に四苦八苦
まず、前提を少し。
私が通っていたデジタルハリウッドスタジオのwebデザイナー専攻コースでは、卒業制作として「webサイトの企画立案〜公開（提出）」というカリキュラムが組まれていました。
テーマは自由。架空サイトにするもよし。自分のポートフォリオにするもよし。私は、より実践ベースで取り組みたかったので友人がやっている美容院のサイトを作らせてもらうことにしました。
大体の手順は教えてもらったのですが、webサイトの作りはじめに何をすればいいのか、死ぬほどぐぐりました。結局5W1Hを考えるというのが私にはしっくりきました。こちら。
ここから、ついに企画書作成開始です。以下実際に提出した企画書が続きます。
なんのためのサイトか
当然ですが世の中のwebサイトにはそれぞれ制作目的があり、私がこれから作るサイトにもなんらかの目的があるはずでした。（卒業制作だから、ってわけに行かないもんね！）
というわけで、5W1Hから「サイト制作目的」をさらに紐解いて、
・現状でクライアントが求めていること
・求めていることに対してwebサイトが実現できること
という手順で考えました。
というわけで構想中のHair Salon MIROのwebサイトには集客のため、という存在意義が与えられたのでした。
・ペルソナがただの都合の良い人に。
さて、サイトの存在意義が決まったところで今度はターゲットユーザーを選定することになりました。（一応スクールで制作の手順書が渡されていた）
「ペルソナを設定する」という行為自体に全くもって馴染みがなかったため、何をしていいか不明だった私は当初クライアントである友人の言葉をそのまま借りて、
・20〜40代の女性
・世田谷区に住んでいる
こんな内容で提出した気がします。それに対して先生の一言。
「範囲広すぎ」
20歳の女性と49歳の女性ではもはや母娘。そこに一括りでターゲティングしたデザインは、結局のところ誰にも刺さらないのでした。言われてみれば納得ですが、逆に言われるまで気付きませんでした。初心者でした。
そこで、ペルソナに設定するユーザーを細かく人物設定をしたものの、次のトラップ発生。
いつの間にか「こんなお客さんが来たら良さそうだな〜」というこちらの願望になっていたのです。
何かおかしい。。と焦りあらゆる初学者むけのブログを読み漁りました。また、同じ頃に参加したLIGのデザイナーさん（下記）によるポートフォリオ講座でペルソナについて徹底解説を伺い、ガッツリ参考にしました。
また、この頃の迷走具合が伺えるのがこちらの投稿。ペルソナのことばかり考えて暮らしてました。
思う存分迷走したあと結果的に落ち着いたものがこちら。
で、こちらのペルソナも設定にあたり、目的達成に対して有効なペルソナである、と根拠を持って言える様にいろいろな数字を見様見真似で拾ってきました。よくがんばりました。
最終的に客単価と周辺地域の年齢別人口データをもとにペルソナ設定しました。
※こんなお粗末なリサーチでいいのか不安になって先生に聞いた所、実案件ではお金出して然るべき所に依頼するから今回はこれで及第点だと、後日教わりました。
コンセプトってなんだ
・コンセプトとデザインコンセプト
サイトの目的、ペルソナが決まりました。手順書によると次に決めるのはコンセプトです。この段階で私が一番つまづいたのが「デザインコンセプト」でした。整理すると以下の様になります。
①ペルソナが抱えている課題
②その課題に対する解決策＝サイトコンセプト
③サイトコンセプトを表現する手段＝デザインコンセプト
こちらを踏まえて、コンセプトまで割とサクサク決まりました。何と言ってもクライアントの友人が自分のお店の売りをしっかり言葉にして持っていて、かつ事前にそれを教えてもらっていたことが大きかったです。それがこちら。
さあ、ここまで考えてきて、最大の壁にぶつかりました。
それは「友達の家」を表現するデザイン方法＝デザインコンセプトが決まらない！！！！！
先生からは、「小難しい言葉は使わないように。中学生でもわかるような言葉にして」と散々言われるも、迷走を繰り返す私。
あらゆるブログを読み漁り、デザイン書籍を読み漁り、twitterで知り合った先輩デザイナーの方々に聞きまくる日々。しかし当然のことながら私のサイトにとってのデザインコンセプトの正解は誰にもわからない。
この企画書〜デザインカンプ制作期間、バッファをもたせて3週間くらいあったはずがコーディング予定期間に突入しても全然決まりませんでした。（方向性が決まらなさすぎて辛かった）
そんな中、先生から救いの一言。
そもそも素材それで大丈夫？
この写真見て「友達の家」みたいって思ってもらえる？
はい、合ってませんでした。この時点でもらっていた素材はホットペッパー掲載用に友達が準備した外観写真＆店内写真のみ。「友達の家」要素は正直ゼロ。悪く言えばただのちょっと綺麗な美容室。
光が差してきました。
そして検討の結果、ひと目で「友達といる」状態だと認識するためには「人間が2人写っている」「自然体である」ことが必要だということに落ち着いたのでした。（手持ちの素材ではその条件を満たせたなかったため、急遽モデル役を友達に頼んで追加で撮影させてもらいました。ありがとう・・・！）
その結果出来上がった自分なりのデザインコンセプトはこちら
その後最終的に落ち着いたメインビジュアル。
ちなみに迷走中に作ってたデザインカンプは外観写真をそのまま載っけただけ。見返すのが恥ずかしいです。どれくらい迷走してたかというと、「友情」という花言葉をもつ植物の画像を入れようかと本気で考えてました。（ああ・・・）
コーディング知識絶対必要！
紆余曲折を経てようやくコーディングに突入。ここで私が実感したことは、何よりコーディング知識必要すぎる！！！
巷でつよつよの方達がしばしば論争起こしてますが、そういう次元ではなく単純に自分の勉強不足により自分の首絞めました。
例えば。
画像とテキストのボックスを重ねて配置するレイアウトにした所、安易にpositionを使ったため画面サイズを動かすと一瞬で崩れました。泣きました。
また、基本すぎて呆れますが初学者（私）にとって意外と落とし穴なのが単位。
positionの可変サイズ対応に泣いた後だったので、今度はvw,vhを多用していたところ制作発表会用の2000px超のデバイスで表示したところ、無残にレイアウト崩れしました。泣きました。
その後、崩れたところは全部手計算で%に直しました。もっと効率的な方法があったのでしょうがそれ以外分かりませんでした。
難しいことは分かりませんが実感を持って思ったのは、デザイナー側がコーディング知識を持っていれば最低限の気遣いはできるから円滑に仕事勧められるだろうなってことです。
まとめ
途中で疲れて頭悪そうな文章になりましたが、一貫して学んだことは大きく分けると以下２点。
・設計を作り込めばこむほど後は手を動かすだけ、逆に設計甘いと後が辛い
・クライアントはびっくりするほどwebリテラシー低い（だから丁寧にコミュニケーション必要）
ちなみに、現在このサイトは実際の店舗サイトとして公開してもらってます。スクールの卒業制作とはいえ誰かの想いがあって開業しているお店のサイトを作らせてもらえたことは、webサイト制作に改めて向き合うきっかけとしても本当にありがたい機会でした。
このサイト制作で、実感としてコーディング教材をこなす「勉強」の100倍学びがあったので、twitterでよく言われる「いつまでも勉強してないで早く実務に触れよう」という先輩方の声に本気で納得しました。
今後も、「勉強」と称してただの作業に時間を費やして自分を誤魔化すのはやめよう、とこの文章を書いていて改めて思いました。
以上、結局自分への戒めでした。
この記事が気に入ったらサポートをしてみませんか？