おりぞめのさちが綴る〜「駆け出しディレクター初めてのWebサイト」制作レポ
「その制作の過程、noteに残しなよ」
2023年の秋、おりぞめのさちさんと大デザナレ展に行きました。そのとき、「石川さんからこんなことを言われた」と、さちさんに話しました。
「好きなことをやっているなら、その制作の過程をnoteに残しなよ」
「時間がなくてnoteを書けない」と話すと、さちさんが「そのnote、私が書きたいです！」と言いました。なので、お願いすることにしました。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
・執筆者：おりぞめのさち
・クリエイター（主にデザイナー）のためのライター
・2021年に発足した「駆け出しデザイナーを一人にしない」をモットーに活動している「まるみデザインファーム」のコミュニティマネージャー
・「はじめのいっぽ」を応援するのが好き。
・ディレクター兼デザイナー：ちょこいえさん
・フリーランスディレクター・デザイナー
・2021年デザインの勉強を開始
・「共創」をテーマに、Web・紙・立体などをクリエイト
・「まるみデザインファーム」YouTubeアカウントディレクター
・このレポを読んで欲しい人
・デザイナーからディレクターになりたいと思っている方
・ちょこいえさんのディレクター・デザイナーとしてのはじめの一歩を知りたい方
・ちょこいえさんのお仕事に興味がある方
・制作したサイト
「山家SEO・Webコンサルティングサイト」
https://yamaya-consulting.com/
1、制作レポ（何をしたか？)
・ヒアリング
まず初めにクライアントかつ今回のプロジェクトの協力者でもある山家さんに丁寧にヒアリング。
・ワイヤーフレーム作成
まずはWebサイトのワイヤーフレームを引かれていました。
その後、ちょこいえさんはディレクション業務も進めながら、ロゴ・サイト・イラスト・アイコンもデザインされました。
・ロゴデザイン
山家さんの思いやコンセプトをまとめて、サービスの象徴となるロゴの案を制作。
ちょこいえさんに当時「どのようなことを考えてロゴを考えてらっしゃったのか」伺いました。
＜ロゴデザインの際、ちょこいえさんが考えていたこと＞
・基本のモチーフ
┗「山家さん」というお名前から「山」のモチーフを基本にする。
・色
┗サービスのコンセプトからより「実直さ」を表したかった。
┗そのため緑や明るい青ではなく「落ち着いた暗めな濃い青」を選定した。
・ロゴで表現したかったこと
①山家さんの性格とサービスの性質を掛け合わせる
┗山家さんの性格「実直さ、正直」
┗サービスの性質「経営者に伴走する」
②山家さんの好きなものを取り入れる
┗招き猫・サウナ・ヤクルトスワローズ（ツバメ）・マラソン・・・縁起物にこだわる山家さんなので、人が集まると言われている「ツバメ」と、人を呼ぶ「SEO」を紐づけると良さそう。
山家さんへのご提案を進め、無事ロゴが完成！
・サイトデザイン
ロゴが決定した後は、サイトのデザインへ着手。「伝わりやすさ・共感・SEOのサービス」を意識しながら、デザインされたそうです。
＜サイトデザインの際、ちょこいえさんが考えていたこと＞
・伝えたいメッセージ・コンセプト
「山家さんも経営者なので、経営者さんの気持ちがわかるよ！」
「（ Webサイトを見ていただいてくださった）あなたと一緒に山家さんも走っているよ！」
というメッセージを伝えられるようなWebサイトにしたかった。
・SEOと共感
SEOのコンサルのサービスを提供はするが、「SEOにこだわりすぎてもよくない」「事業の中身が大切」という山家さんの思いと過去の経験が、このコンサルティングの中には含まれている
ことがわかるようなデザインにしたかった。
（私（＝おりぞめのさち）はSEOについてあまり詳しくなかったので、SEOについての知見が大変深まり勉強になりました。SEOを意識して対策を講じて Webサイトを作ることは大変重要だと言えます。しかし、こだわりすぎて失敗することもあるらしく、奥が深いコンテンツだなと思いました。）
ここまでを受けて、ちょこいえさんは３つのファーストビューを山家さんにご提案されていました。
ファーストビューのビジュアルを、写真にするかそれとも他の手段にするか、大変悩まれたとのこと。そんな参考サイトを探されていたちょこいえさんが見つけられたのは、ある士業のWebサイト。可愛くあたたかなイラストが添えられていました。
「こういうイラストを描くのはどうだろう？」と考え、山家さんにご提案・承認されたそうです。
（クライアントさんの思いを受けてより良いものを提案する、クライアントさんとしてはとても嬉しいことだと思います。）
・イラストデザイン
山家さんがちょこいえさんに共有してくださった参考写真には、美容師さんやお医者さん、弁護士さんなどの多様な経営者の姿があったそうです。そのことから、「さまざまな経営者さんに”このSEO Webコンサルティングサービスは自分のためのサービスだ”と思って欲しい」という山家さんの意図を感じられたそう。
そこで、ちょこいえさんは「街の絵に、対象になりそうな職業に就いているたくさんの人を描こう」と思ったそう。
次に提案されたファーストビュー案には、たくさんの経営者を描かれていました。
ラフの段階で、「この方向性がとても良い」と山家さんのGoサインが出ました。私もとても素敵だなと思いました。イラストには色がつけられ、たくさんの経営者が増やされ、とっても賑やかで明るいイメージにファーストビューになりました。
・アイコンデザイン
Webサイトにはアイコンの必要性を感じたので、さらにアイコンのデザインも制作・ご提案されており、採用されていました。
作・ご提案。採用されたそうです。
など。1つ1つのアイコンに思いや意図を込めてデザインされていました。
加えて「山家さん」のイラストも描かれて、和やかで優しいイメージを醸し出されていました。
いろんなものをデザインできてすごいです！
・LINE公式アカウントのリッチメニューデザイン
サイトのデザインが終了し、LINE公式アカウントのリッチメニューもデザイン。
山家さんの要望を受けて、わかりやすくて・シンプルに・使いやすくデザインをされたとのこと。
＜LINE公式アカウントのリッチメニューをデザインするとき考えていたこと＞
・LINEを使い慣れていない経営者の方が見ても、どこを押せばいいかわかる。
・LINEでのチャットメッセージと電話のどちらもできるようにする
・ボタンを押しやすいように大きくした。
・ディレクション業務
無事デザインの制作が終了した後は納品へ。
コーダーのまりなさん・LINE公式アカウントの構築を担当されたYukariさんとやりとりをしながら「共創」を進められていました。
連携をとるときには「相談」を心がけたそう。
＜他のスタッフと連携するときに気をつけられていたこと＞
・相談する際には、前提・目的・意図をお伝えする。
・「こういう雰囲気にしたいけど、どっちが良い？」と聞く。
・わからないことはとにかく聞く・相談する。
・自分よりわかっている人に相談して、お互いの知っている部分を掛け合わせた方がいいものができると思うから。
・「これどうですか？」「どっちの方が良くなりますか？」と確認しながら進めた。
「相手の得意なことを見つけるのが好き」と言うちょこいえさんは「“この人は私よりいい正解を持ってそうだな”と思ったら、すぐ聞きます！」と笑いながら話してくれました。
2、制作レポ(どうやったか？)
ディレクター兼デザイナーとして Webサイト制作にどのように関わられたのか、ポイントを教えていただきました。
抽象から具体まで考えた
クライアントが言っていることを「抽象」からワイヤーフレーム、ロゴ、デザインの方向性を決めて、完成「具体」まで落とし込んだ。
クライアントの言葉以外からも材料を集めた
クライアントの言っている言葉だけではデザインを決め切れなかった場合、クライアントの発信、話し方、他のサービス、好みなど、多方面から材料を集めた。
デザインの意図を伝えた
デザインや他の場合においても、「〇〇だからこういうふうにしたらいいのではないか。」と理由を添えて、方向がブレないようにした。
コーダーさんが変更を加えたい場合にも、〇〇を共有していることで、コーダーさん自身で判断をしてもらいやすかった。
可能な限りデザインカンプに書いた
「これは書く必要があるだろうな」と想像して、記載する必要がある情報と記載する必要がない情報の判断をした。
そのうえで、色や文字の仕様など、相手にとって必要となりうる詳細の情報やデザインをできる限りデザインカンプに書き込んだ。
それは手戻りが少なくなって、結果的に早くすむと思ったから。
当時の自分がわかりうる範囲で書き込むことを心がけた。
これは職人さんに渡すための建築図面をかいていた経験が、コーダーさんへ渡すためのデザインカンプに応用するために生きたと思う。
でもまだまだ十分だとは思っておらず、改善していきたい部分でもある。
対話を大事にしたい
まずはクライアントさんと「対話」することを大事にしたい。
さらに、対話以外からも背景や気持ちを読み取りたい。
そして、それを踏まえた踏まえたデザイン・ディレクションをしたい。
3、制作を振り返って
・１年間でディレクター初サイト制作
2022年11月25日時点でこんな投稿をしていたちょこいえさん。
デザインが大好きなディレクターに、俺はなる！
— チョコ・ジョーカク (@choko_ie) November 25, 2022
2022年12月15日、こんなnoteも書かれていました。
▼「ディレクターになりたいデザイナーの話」
それから１年も経たない間に、まるみデザインファームのYouTubeディレクション業務やWebサイトのディレクション業務などを経て、現在はフリーランスの Webディレクター兼デザイナーとしても歩まれています。
実際に「デザインが好きなディレクター」になられたちょこいえさん。有言実行、すてき！
「自分が思う“いい”と思うことをやった」
今回の Webサイト制作は、ちょこいえさんにとって、「ディレクターとしてもデザイナーとしても初めてのWebサイト制作」となったそう。
今回は山家さんが進行管理をしてくださったことに加え、「これはディレクターの仕事だよ」とか「ここまでやってね」などの細かな指示はなかったとのこと。そんな中で「自分が“いい”“これが必要”と思うことをやった」と話してくださいました。
デザイナーかディレクターかどちらかに思考が偏ることなく、一貫して「クライアントの希望や意図、特性をどうやったら伝えられるか？」を考えて制作に当たりました。
今回初めて自分のやりたかった「ブランディング」部分から関わることができて、本当によかったです。
まだまだ足りない部分もあったかと思いますが、今後もヒアリング(対話)を大事にしながら、使う人の立場に立ち、使いやすさや伝わりやすさを大事に制作していきたいです。
今後の活躍にも目が離せませんね🎉
ご依頼はこちら
ちょこいえさんへ個人の仕事のご依頼
X(旧twitterDM）へお寄せください。
X → @choko_ie
お礼
謝辞・クレジット
●今回制作した Webサイト
「山家SEO・Webコンサルティング」
● Webサイトリニューアルスタッフ
・プロデュース：やまやさん
・コーディング：まりなさん
・LINE公式アカウント：Yukariさん
・協力：プラスレビュー（アロードさん）
・応援：まるみデザインファームのみんなたち
・ディレクション・デザイン:ちょこいえ
なお山家さんのご厚意により、企画から公開までの様子は「まるみデザインファーム」内限定コンテンツ「やまやディレクションファーム」として全て公開されていました。ありがとうございました。
●本note
・ディレクション:ちょこいえ
・構成・執筆：おりぞめのさち
・協力：ももこ（魚座デザイン）さん
●最後に
実は本noteの前に2つのnoteがありました。
「ちょこいえさんのポートフォリオにより適するように」
「未来のちょこいえさんのファンに届くにはどんな形でまとめるのが良いのか？」
着手してから約4ヶ月の間、2人で何度も話し合って、練りあげ、このnoteを公開しました。ここにもまさに「共創」がありました。
別のバージョンをご覧になりたい方、このnoteの裏側や執筆過程に興味のある方は、ぜひ読んでみてください。
【執筆裏話】不採用にした全く違うテイストの下書き3本を大・公・開！！！！🤣気づけば執筆しながらちょこさんに"ディレクション"されていた👀!?〜おりぞめのさちが綴る〜「駆け出しディレクター初めてのWebサイト」制作レポの執筆レポ（タイトル長😂）
別バージョン 1本目（ちょこいえさんになりきって書いたゴーストライター風）
https://note.com/preview/n9890b405ac70?prev_access_key=a6c773ae8ee650c64f589a7b1bf2dc32
別バージョン 2本目（インタビュー形式）
https://note.com/preview/na05a48195b5d?prev_access_key=ba83ea3e09fedf5f744067eb27139dd7
別バージョン 3本目「ちょこいえさんをディレクターにしてくれた"Webサイトの話」
https://note.com/preview/n070a63e403da?prev_access_key=d6fbf78d29c94cdde0e9c99916c77b1b
最後までお読みくださり、ありがとうございました。
✉️
🎊Special Thanks おりぞめのさちさん🎊
さちさんがインタビューしてくださって、「ちょこさんはすごいことをやっています！」とフィードバックしていただいたおかげで、自分が無意識にやっていた思考を掘り起こして言語化することができました。
私の気持ちに寄り添って、粘り強く文章を推敲してくださいました。
この場を借りてお礼を申し上げます🥰