制作実績

本案件の岩崎瓦工業様は大正2年創業で創立100年以上で、初代より屋根工事を世田谷区の地で生業としている歴史ある実績と技術のある屋根工事専門会社です。今回はホームページデザインのリニューアルのご依頼でした。

そしてこの案件は私にとって初めてのWebデザイン。本当に0からのスタートでもありました。制作期間中、私はWeb制作を行うにあたって知らないことも多く、作成に関わったチームの皆様にかなりご迷惑とご心配をおかけしたかもしれません。
それでも最後まで一緒に走り切ってくださった皆さんのおかげで、初めての案件であるにも関わらずクライアント様に納得していただける内容のものを納品することができたと実感しています。

デザインについて

こちらのホームページをデザインする前にクライアント様と打ち合わせをする中で以下のようなご要望がありました。

・ドアノックツールとしてのホームページにしたい
・シンプルなデザイン
・若い世代にも選ばれやすく、敷居が高すぎないもの
・余暇に見るものではなく、病院を探すときのように急ぎの場合に見るもの
・伝統的な雰囲気を大切にしつつ、シンプルに
・カラーは紺色×白
など。

これらのご要望を参考にして以下のことに注意しながらホームページのデザインを進めることにしました。

・ドアノックツールとするため直感的に内容が入ってくるデザイン
・伝統的な雰囲気、紺色×白は大切にしつつグラデーションやイラストを用いることで親しみやすさも大切にする
・自分がこのサイトを使うならばどういったところが分かりやすければ良いかを意識

直感的な要素を意識した例として、屋根材の表の中で、テキストだけではなくそれぞれの屋根材の用途について◎、○、△で有効性などを表しています。

このようにアイコンによる補助的な要素を加えることで、文章を読むことが苦手なお客様でも直感的に屋根材ごとの性質を把握してもらえるようにしました。そうすることで工事をご検討される際の参考にしやすいような設計となっています。
その他にもイラストやアイコンはリニューアル前のホームページで使用されていたものをリメイクして使用するなど、お客様が直感的に情報を得やすいような設計や工夫を意識しながら制作に取り組みました。
特にイラストはリニューアル前から使用されているものがとても素敵なものだったので（クライアント様本人が描かれたもの）、Adobe Illustratorを活用してベクターデータ化し、ホームページの各所で説明の視覚的な補助や、彩りを与えてくれる存在として活躍してもらいました。

クライアント様とFigmaでのコミュニケーション

今回の案件ではクライアント様にもFigmaのデザインカンプを共有し、直接Figma上のコメント機能を活用していただきながら細かい調整を行なっていきました。写真や文章の差し替え、修正なども直接クライアント様にコメント機能でご指摘いただきました。また、デザインに変更があった際に、いくつか準備したデザインパターンを直接Figma上で選んでいただくことにも活用しました。
クライアント様からもこのコミュニケーションの方法に「クラウド上のシームレスなやり取りで全体を見ながら細かい調整ができました。変化に対する意見をまとめていくのが簡単になり、互いの反応も見えやすくなったので、集中して進めやすくなったと感じます。また、素人の考えを潰さずにガイドしていくのも上手だったと感じます。」というありがたいお言葉をいただくことができました。実際に調整に取り組んでいる際に「これならいかがでしょうか？」と調整したデザインを提案した際に、すぐ反応をいただくことができたことはすぐに調整に入ることができるなどデザイナーとしてもありがたく、クライアント様と細かな考えや想いをより共有することができたので、ホームページ完成に向けての歩みがよりスムーズになったと感じます。

サポートしてくださった皆様へ

最初にも申し上げたように、私にとっては初めてのWebデザインでした。この案件を達成するまでに制作チームをはじめ、たくさんの方にサポートをしていただきました。
ディレクター、コーダーの方が経験の無い私でも最後まで信じてしっかりと見守ってくださり、並走してくださいました。この見守りや並走があったからこそ、初めてのWeb制作でも無事最後まで完走することができ、クライアント様にも納得していただけるものを納品することができたのだと思います。

制作チーム以外にもデザインレビューを依頼させていただいた方も、経験の無い私のための丁寧なデザインレビューをしていただき、未経験なので知らないであろうことをそのままにしないよう事細かな説明（基本的なWebでの考え方や仕組みなども含め）も適宜行いながらレビューを進めてくださいました。例えば「それぞれの余白、文字感覚などの数値には理由がある」というように、数学で言うところの公式だけ覚えるのではなく、公式にするための過程も学ぶようにしながらレビューを進めていただきました。
また、上記のデザインレビューだけでなく知り合いのデザイナーの方からプロの視点で、デザインに対するアドバイスをいただくこともありました。

そういったたくさんの方々のサポートや見守りが無事納品へとつながり、私もたくさんの学びをや貴重な経験をさせていただくこととなりました。この場をお借りして改めまして感謝の意を表します。本当にありがとうございました！

デザインについて

デザインは、見るたびにどんどん洗練されていった印象があります。
 今回のデザイナーさんはイラストも描ける方で、そのスキルがさまざまな場面で活かされていました。
たとえば、もともとクライアントが用意していたイラストを、ホームページに自然に馴染むようデザインへと落とし込んだり、見た目の美しさだけでなく、実際に使うユーザーの視点に立って「使いやすさ・見やすさ」にも配慮した設計をディレクターに提案してくれていました。
そうした積極的な姿勢を間近で見ていて、私自身も良い刺激を受けました。

苦戦した部分

今回のコーディングで特に苦戦したのが、屋根材を紹介する「表」の部分でした。
 これまで表の実装をした経験がなかったことに加えて、PC表示とスマホ表示でレイアウトの見え方が大きく異なるため、それぞれに合わせた2パターンの作成に時間がかかりました。
また、細かいデザインの調整にも手間取り、目標としていた納期ギリギリまで調整を重ねることに。
 その中でアシスタントの方にサポートしていただきながら、何とか形にすることができました。

実案件を通して成長できた

今回の案件を通して、Web制作者として大きく成長できたと感じています。
 クリエイターとして技術面のスキルアップはもちろんのこと、クライアントと直接お話ししたり、ワイヤーフレームやデザインの工程を一通り見させていただくという貴重な経験は、これまでにない学びとなりました。
また、自分も一人のクリエイターとしてクライアントと関わる機会を、ディレクターの方が設けてくださったことにも心から感謝しています。
 クライアントの想いや背景を自分自身で感じ取ることができたことで、コーディング作業へのモチベーションにもつながりました。

最後に

今回の案件では、ディレクター、デザイナー、アシスタントをはじめ、多くの方にサポートしていただきながら制作を進めることができました。
 自分一人では気づけなかった視点や、さまざまなアイデアをいただき、最終的に良いホームページが完成したと感じています。
不安もありましたが、それ以上にワクワクする瞬間が多く、改めて「楽しい案件だった」と感じています。
 そんなワクワクできる環境を作ってくださった皆さんには、心から感謝申し上げます。
これからもクリエイターとして、さらに成長できるよう努力を続けてまいります。