【ポートフォリオ・架空企業サイト】クオリティが今よりちょっとマシになる制作前の２ステップ～その2～

数ある記事の中から目を止めて頂き、ありがとうございます。
こんにちは！
Liall.（リアル）のディレクション担当、藪内です。
「Liall.ってなに？」という方はこちらから是非サイトを覗いてみてください！

前回の記事の続きで、初心者の方がポートフォリオや架空企業のサイト制作をする際に、悩んで手が止まったり、逆に何も考えず学びが少なったりしないように。
そのうえで、今までよりちょっとクオリティが上がる、制作前のステップについて引き続き私なりの意見を述べていきたいと思います！

前回の記事はこちら！

多分前回の記事を読まないと分かりにくい部分もあると思いますので、その点ご留意願います！
前回の記事で、明確なゴールを決めて制作をしたほうがよいよ！という部分までは述べたと思いますので、その続きからとなります。

【２－０．制作前の準備で制作物のクオリティは8割決まる】

ここでいう明確なゴールとは、「制作物に求められる条件と、それに対するアンサー」を思いつく限り全て羅列していき、「この要件を満たせば、お客様の要望に応えられる」という、細分化された複数の条件を絞り出すことです。

「制作物に求められる条件」とは、依頼者があなたに求める、こんなホームページがほしいを言語化したものと考えて下さい。
「それに対するアンサー」とは、依頼者の要望を満たすために、あなたがホームページへ反映する内容とその説明です。

例えば「お客様から問い合わせが欲しい」という要望があれば「お問い合わせフォーム」は必須ですよね？
ただフォームがあるだけでは、お問い合わせしてもらえる確率は低いでしょうから、「お問い合わせしたくなるような導線やデザイン」が必要ですよね？

このように、ざっくりとしたお客様の要望（今回は架空の企業サイト制作なので、架空のご要望）を、自分のできる範囲で細かく突き詰めていく作業です。
その思考内容は、全て制作物で「なぜこのデザインにしたか」「なぜこの機能を搭載したか」という自分なりの意図になります。
もちろん、初心者なりに考える内容ですから、プロから見れば不十分だという点は仕方ありません。
ですが、考えずにただ作業する人は自分なりの答えを用意していませんから、不足や誤りがあることに気付きにくいでしょう。
不足や誤りがあっても、自分なりに考えながら作業する人はそれに気づき、修正し成長することが出来ると思います。

また、本来フリーランスで業務を請け負うことになれば依頼者にヒアリングし、企画提案し、要件定義し、制作していくという流れを基本的には独力で行うわけです。
その際に、きちんと相手の要望を突き詰めて、その要望に応えるための思考を架空企業のサイト制作等で練習しておくのも決して無駄にはなりません。

ただ、今回はあくまで架空サイト制作なので、自分一人で決定していくことになります。
ヒアリングから要件定義まで、様々な書籍が出ていますし、手法も結構色々ありますが、そこを突き詰めないと作業に入れないのではいつまで経ってもポートフォリオや架空サイトが出来ません。
とはいっても、考え込むタイプでなおかつ完璧主義の人だと尻込みしてしまうと思います。
そのため、架空企業のサイト制作だから出来る、私なりの「自分が割り切る為」のテクニックを紹介します。
まずは以下の順に作業を進めつつ、自分なりに制作物のゴールを設定していけば十分だと思いますし、実際に制作をしていくうちに「ここはこうすればよいのか」等の気づきも生まれると思います。

【２－１．初心者向け架空企業サイト制作用テクニック】

・簡易版
①制作する架空サイトのジャンルを決定
②同ジャンルの企業サイトをいくつか調査
③調査結果をまとめ、よく掲載される内容やデザインを掴む
④その内容を希望している架空の依頼者をイメージの中で作り上げる
⑤④の架空の依頼者の要望（※③でまとめた情報が答えになるもの）をいくつかあげ、それに対する提案内容として、③でまとめた情報そのものをホームページへ落とし込む

本来の業務とは全然順番が違いますが、あくまでポートフォリオ用の架空サイト制作のためですので割り切っていきます。
本来の業務とかけ離れているのは納得できない、という方は以下の順番でどうぞ！

・本格版
①架空の依頼者をイメージの中で作り上げる（orクラウドソーシング等で仕事依頼している人から条件を設定する）
②依頼者のざっくりとした要望やホームページ制作の目的、現状の事業における課題などをまとめる（orクラウドソーシング等で掲載されているざっくりとした要望から設定する）
③依頼者と同ジャンルの企業サイトをいくつか調査
④依頼者の要望を掘り下げ、ターゲットやコンセプト、課題解決に必要な要素を、上記の調査結果と合わせて決定
⑤制作するサイトへ落とし込む

今回は、あくまで架空サイト制作に悩んでいる人向けのnoteのため、簡易版で制作する前提で話を進めます。

【２－２．ジャンル決定】

ではまず上記①、どんなジャンルの架空サイトを制作するか決めましょう。
このあと②として制作する前に、実在する同ジャンルの企業のホームページは調べることになります。
そのため、ご自身がとても詳しいジャンル（前職の分野とか、興味のある分野）にしておけば、掲載するコンテンツをそれほど時間をかけて調べずとも、なんとなくどんなものが掲載されているかは知っているので時間短縮になります。
「人より詳しいものや興味のあるジャンルなんかねーよ」という方は以下の条件に合致しそうなものを選ぶとよいです。

・商品じゃなくてサービスを売っている企業
・調べるのが苦痛じゃないジャンル

商品を売っている会社のホームページを制作する場合、商品写真が必要になりますが、気に入った写真が常に手に入るわけではありません。
サービスであれば、商品写真は不要なので、気に入った写真を探せる範囲が広がりやすく、「写真画像のせいで、なんか雰囲気微妙だわー」という言い訳を自分にさせません。
また、興味のないものを調べるのにモチベーション上がる人っていないと思うので、せめて調べるのが嫌じゃないジャンルにしときましょう。

今回は例として、「弁護士事務所の架空サイト」を制作することとし、話を進めます。

【２－３．サイトの調査】

制作ジャンルが決定すれば②、実在するサイトの調査です。
この作をも突き詰めていけば、競合調査として実際の業務に活かせるのは間違いないのですが、まずはそこまで気負わず「みんなどんなサイトを準備しているんだろう？」という心構えで良いと思います。

実際のサイトを調べていけば、③としてよく入っている文言やサービス、デザインの雰囲気を感じ取れると思います。
それが一般的に需要のあるものです。
なおかつ、プロが必要だと考えたデザイン・機能でもあります。（明らかに古臭いデザインであったり、素人っぽいデザインだと感じるサイトがあれば調査対象から外しましょう）

例えば、弁護士事務所のサイトを架空で制作しようと思い、実際に調べてみたところ「信頼・誠実・知的・真面目」といったイメージや「親切・優しげ・親しみ」といったイメージを持つデザインの二種類が多いと私は感じました。
一方で、「遊び心のあるデザイン」なんかは少ない印象を受けました。
また、「離婚」「相続」「顧問」など、弁護士事務所としてたくさんのジャンルのお仕事があると思いますが、良く掲載されているジャンルと、掲載されている頻度が少ないものがあります。
こんな風に、いくつかのサイトを見て回りながら、よく使用されている雰囲気や文言、サービスをまとめていきます。
そして、わざわざ物珍しいもので制作せず、よくあるデザイン、よくある掲載コンテンツで制作する心づもりでいてください。

前回設定した「より良いもの」の定義で言えば、わざと外したデザインやコンテンツで勝負をする意味は薄いです。
少なくとも初めての架空サイト制作でやる必要はないです。
また、複数の方向性の違う案（今回であれば「親しみのあるデザイン」と「誠実なデザイン」は方向性が多少なりとも違います）がある場合、ご自身が作りやすい方で決定していいです。
作りやすいというのは、「自分が依頼者のお客様になったと想像しやすいもの」です。
例えば、自分自身が相続について悩んでいれば、相続を弁護士に依頼しようか検討するお客様の気持ちは想像しやすいはずです。
「なんか色々法律だったり税金であったり、手続も含めて相続って大変そうだなぁ。」
「親身に対応してくれて、出来れば面倒事はまとめて引き受けてほしいなぁ。」
こんな風に依頼者のお客様の気持ちが想像できれば、依頼者のサイトに必要な要素が見えやすいので、是非検討してみてください。

今回は、上記条件を踏まえて、「親しみのあるデザインで、相続を一括で対応してくれることを売りにしている弁護士事務所ホームページ」を制作することとします。

【２－４．架空依頼者の設定】

では続いて④架空の依頼者設定です。
制作するのは、「親しみのあるデザインで、相続を一括で対応してくれることを売りにしている弁護士事務所」ですから、これを要望としている架空の依頼者をイメージします。

『独立されたばかりの女性弁護士で、得意分野が相続。
　ホームページを作り、お客様を集客したい。』

こういうざっくりとした要望を持つ架空の依頼者をイメージしていきます。
要は、答え（制作物）から逆算して依頼者像を決定していくわけです。

決定した依頼者は、「独立されたばかりの女性弁護士で、得意分野が相続」です。
ご要望は、「ホームページを作り、お客様を集客したい」です。
そのために制作するのが、「親しみのあるデザインで、相続を一括で対応してくれることを売りにしている弁護士事務所ホームページ」です。
だいぶ見えてきましたね。

【２－５．ゴールの決定】

ここから⑤ホームページへの落とし込みです。

「親しみのあるデザインで、相続を一括で対応してくれることを売りにしている弁護士事務所ホームページ」をどのように表現するかです。

➡「親しみのある」「女性弁護士」の要素から暖色系を使ってみようかな。
➡「相続」のメイン顧客層って何歳だろうか？平均寿命から逆算して、親御さんが亡くなった人が増加しそうな50代後半から60代前半の方を意識したデザインにしてみようか。
➡そうなるとフォントサイズもあんまり小さいものは使わないようにしないと。
➡ターゲットの年代的には、お仕事で忙しいとかありそうだけど、顔見て話す方が安心を感じる人も多そうなので、事務所の位置や電話番号なんかは必須だし、依頼者（弁護士）の顔写真とかもいりそうだな。
➡TOPページのファーストビューでは、相続を一括対応することを強くアピールしたらどうかな。
➡集客という要望へ応えるため、問い合わせページ・フォームと、問い合わせしたくなる導線を用意しないと。
➡ただ、相続ってそんなに簡単に申込みに至るような内容じゃないだろうから、まずは無料お問い合わせとか、相続マニュアルみたいなものを無料配布するためのボタンという設定にしたらどうかな？

こんな風に「大枠から徐々に細部へ」詰めていきます。
そうすると、自然と依頼者の「ターゲット」「デザインルール」「掲載コンテンツ」などが少しずつ積みあがってきます。
自分なりに絞り出したそれらをまとめれば、制作するべき架空サイトに必要なデザインや機能が見えてくるはずです。

【２－６．それでも手が止まってしまう場合】

とはいえ、積みあがった内容が自分に実装できないこともあると思います。
お問い合わせしやすい導線ってなに？と悩むコーダーや、これデザインは良い感じやけどどうやって実装するん？と悩むデザイナーは絶対出てきます。
これが実際の依頼であれば確かに困ってしまう場面もありますが、今回はポートフォリオのための架空サイト制作です。

悩めるコーダーさん、こじつけましょう！
「お問い合わせフォームにすぐ移動できるように、全ページで問い合わせフォームにリンクするボタンが固定でついて回るようにしてます！」
悩めるデザイナーさん、出来る方法でとりあえず実装しましょう！
「ボタンのデザインすごい良いけど、実装の仕方分からなかったからとりあえず<img>タグでボタンデザインを画像として丸ごと貼り付け」
こうしておけば、コーダーとして要素がスクロールしてもついてくるものは作れるよとか、デザイナーとしてデザインは良いのが作れるよってことは伝わります。

それでフリーランスとして仕事が来たらどうするの？という不安がある人いるかと思うんですが、全部自分でやる必要ないですよ。
出来る人や仕事仲間を見つけてお願いすればいいんです。
私自身もLiall.（リアル）にはそういう趣旨で参加しています。
フリーランスチームとまでいかなくても、仲の良いフリーランサーとか、自分にないスキルを持った人とかと交流を持っておけば、困ったときに依頼できるので良いと思います。
そういう知り合いが周りにいない？
基本は、知り合いを作る方向が安心だとは思いますが、どうしてもだめならクラウドソーシングなりで依頼すればいいんですよ。
同業者に頼むのって、凄く勉強になること多いですから、決して無駄ではないと思います。

【終わりに】

「拙速は巧遅に勝る」とまでは言いませんが、上記のやり方であれば、「何も考えずに手だけ動かしたもの」よりクオリティはあがると思います。
また、自分が出来なかったことや、考えが足りなかった点が見つかると思います。
いつまでも考え込んで「技術的に難しいことをしないと」と思っているより、よほど学ぶべきことが見つかります。

今後Liall.では「今日のあなたのお役に立つ」情報をnoteを始めSNSやYouTubeを中心に発信して参ります。ぜひご覧下さいませ。
Liall.へのお問い合わせはこちらから承っております。
Twitter・Instagramも更新中！