先日、参加したホームページデザインコンペで優秀賞（２位）をいただきました。この経験を通して学んだことや、気づき、デザイン面で私なりにこだわったポイントなどを書き連ねようと思います。
今回のコンペに挑戦した理由！課題！
＼ 振り返り！行ってみましょう！／
1. コンペに参加した理由と目的
コンペに参加したのは、これまでのデザインスキルをアウトプットする機会を得たかったからです。
加えて、自分がどの部分で課題を抱えているか、弱み強みを知り、それを次のステップへとつなげるための挑戦でもありました。
2. デザイン課題：Figmaの手順を確立する
私には、Figmaを使ったデザイン手順がまだ確立できていないという課題がありました。使い始めてまだ一年未満です。
日々「時短」を目標にスムーズに作業を進めるための方法を模索している中で、今回のコンペはその改善のための実践の場となりました。
3. 最初のアイデア出し：ストーリー仕立てでの再構成
最初のアイデア出しの段階では、クライアント様から提供されたホームページの記載内容を声に出して読み、内容をストーリーとして再構成しました。
ユーザーがページを閲覧する際の流れを意識し、感情的なつながりを作ることを意識しました。
さらに、縦に長いセクションがいくつか存在するため、それらをコンパクトにまとめることも対処しなければななりません。
私自身がユーザーとして、長すぎるホームページは途中で離脱しがちですし、階層が深くなると目的地にたどり着けず、混乱することが多々あるためです。なので、ユーザーにとって使いやすく、目的が明確なページ構成を心がけました。
4. コンセプトの明確化：スタイリッシュとエンターテイメントのバランス
今回のデザインにおいて、「スタイリッシュ」と「エンターテイメント」という異なる要素をうまく組み合わせることが大きな課題でした。この二つのワードは対極にあるとも言えるため、融合を試みるのは非常に困難でした。
そこで、無理に一体化させることを諦め、代わりに各セクションにバランス良くこれらの要素を振り分けて取り入れることにしました。ページ全体でスタイリッシュさとエンターテイメント性を配分し、デザインにメリハリをつけることで、ユーザーが飽きることなく楽しめる構成を目指しました。
これにより、ユーザーが興味を持ち続けるHPを作り出すことができたと感じています。
5. 差別化できた点
特に差別化できた点は、クライアント様から提供された情報をただ配置するのではなく、ストーリー仕立てで再構成したことだと思っています。また、「スタイリッシュ」と「エンターテイメント」をバランスよく組み合わせたことで、全体にリズム感と一貫性を持たせ、ユーザーにとって印象的なページを作ることが出来ました。
6. 評判の良かったFVについて
ファーストビューに多くの写真を市松模様にレイアウトし、視覚的なリズムを生み出しました。これにより、ユーザーの視線を自然に誘導し、サイト全体に強いインパクトを与えるデザインに仕上がりました。写真を巧みに組み合わせることで、サービスの多様性や魅力をさまざまな角度から表現し、商品の豊かさとクオリティを効果的に訴求することができたと感じています。
先日、前情報なしで友人にこのHPを見てもらった際、「議員出張寿司」というワードに疑問を抱いたというフィードバックがありました。「これはいったいどんなサービスのホームページなの？」と不思議に思いながらスクロールしたそうですが、すぐ下のセクションでその疑問が解消され、全体のコンセプトがしっかり伝わったとの感想をもらいました。
この部分に関しては、正直に申し上げると、完全に意図していたわけではありません。ですが、結果的に疑問を持たせることで訪問者の関心を引き、次のセクションでその興味に応える構成に出来上がっていたようです。
これを機に、次回以降のデザインでは、訪問者に「次へ進みたい」という好奇心を持たせる要素を積極的に取り入れていきたいと思いました。
7.作業進行の手順
（Xにて時系列で発信しておりますので簡潔に書かせていただきます）
1） 提案書を声に出して読む → 構成の深堀り
2）競合店調査 → 幅広い業界のホームページを閲覧
3） クライアント様調査 → SNSの活動を元に方向性を確認
4） 画像提供まで日にちがあったため、デザインに干渉しないセクションを完成させる
5）画像提供後 → デザインが整っていない為、仮画像の認識で埋込
6）デザインが整った状態で画像再選定→画像自体で充分キャッチーになるよう
7）プロトタイプ諦める→デザイン完成に全振り
8）完成後ようやくFVに取り掛かる（今時点ですでに締め切り三日前）
FVに関しましては、期限までに完成できるのか、そして後戻りのできないギリギリの日程です。これに関してのメリットとデメリットを挙げてみました。
ーFV（ファーストビュー）を最後に作るメリットー
♦ 全体のコンセプトが固まった状態で作成できる
ページ全体のコンセプトや構成が確定してからFVを作ることで、全体の方向性に一貫性を持たせやすくなります。
♦ 他のセクションとのバランスが取りやすい
すでに他のセクションで重要な要素がどのように表現されているかがわかるため、FVが過剰になったり、逆に弱すぎたりすることを防ぐことができます。
♦ ストーリーの流れが明確にできる
ユーザーがページに引き込まれるようなストーリーの入り口をより効果的に設計することができます。これにより、ページ全体を通して自然な流れを感じさせ、次のセクションにスムーズに誘導できます。
ーFV（ファーストビュー）を最後に作るデメリットと対処法ー
今回、メインセクションが和風寄りになってしまった為、FVも和風になってしまい、コンセプトから反れているのではないだろうかと不安になりました。何度も申し上げますが、後戻りのできないギリギリの日程です。
この反省を次に活かすために、私なりの対処法も併せて記載いたします。
1. 全体の方向性が見えにくくなる可能性
FVはサイト全体の雰囲気やメッセージを決定づける重要な部分です。これを後回しにすることで、全体のデザインやコンセプトがぼやけたり、ページ全体の方向性が定まりにくくなる可能性があります。
→ビジュアルガイドラインの作成
メインセクションやFVをデザインする前に、ビジュアルガイドラインを設定する。色使いやフォントのルールはもちろん、どの程度、違った要素を取り入れるかなど、デザインの基準を明確にしておくと、FVが全体のコンセプトに調和しやすくなるのかなと思います。
2. 制作スケジュールに影響するリスク
3. ビジュアルや要素の調整が難しくなる
FVが最後になると、最もインパクトのある部分が未完成のまま進行するため、クライアント様の確認が遅れたり、最終的な修正に時間がかかることがあります。特に、FVが一番目立つ部分であるため、手直しが発生すると進行全体に影響を与える可能性があります。
→作成の初期段階で、FVも含めて全体のコンセプトを再確認し、その方向性がしっかりと反映されるように常に意識。コンセプトをデザイン全体で貫くために、その他の要素が目立ちすぎないように、反れないように調整。
FVを後に作ることで、一貫性や柔軟性に利点はあるものの、これらのデメリットも考慮に入れながら進めることが重要だなと感じました。
7.失敗と課題
（Xにて時系列で発信しておりますので簡潔に書かせていただきます）
1） 要望書の頻繁な確認と修正の繰り返し
クライアント様の要望書を何度も読み返し、その度にデザインを見直して細かい修正を加える作業を繰り返しました。もちろん、クライアントのニーズに応えることは大切ですが、ビジュアルガイドラインやコンセプト設計がしっかりしていなかったため、頻度が増し、効率を欠いていたと痛感しました。
2） プロトタイプの作成に失敗
動画や動きの表現方法を理解しないまま、プロトタイプの作成を後回しにしてしまいました。最終的には時間も余裕もなく、テキストベースの提案にとどまり、視覚的な効果が十分に伝えられませんでした。
3） スマホ寄りレスポンシブの誤解
クライアントの要件であった「スマホ寄りレスポンシブ」を正確に理解しておらず、スマホ版だけでよかったにもかかわらず、PC版と二つを用意してしまいました。この結果、大幅な時間ロスが発生し、要件の誤認識がご提案そのものに悪影響を及ぼすという致命的なミスとなりました。
これらの失敗を通じて、クライアントのニーズを正確に理解し、コンセプトとガイドラインを明確にすることの重要性を改めて学び、それらを課題として、今後の製作に活かしていこうと思います。
長々と書き連ねましたが、ここまでお読みいただき、誠にありがとうございます。これからも積極的にデザインコンペに参加し、学びを深めていくとともに、ココナラでの活動もさらに力を入れて頑張ってまいります。
最後に、私の提供しているサービスをご紹介させていただきます。
短期間限定のホームページ制作や、デザインに関するご相談を承っております。特に、ユーザー視点に立ったストーリー性のある構成が得意です。お客様のニーズに寄り添い、お届けいたしますので、ぜひご利用ください。
皆様のご依頼を心よりお待ちしております！
↑コンペ作品の確認はこちらから✨
2024.9.27 すだち🍊
