サイト模写（応用）で学ぶデザイン成長とリニューアル術

昨年12月にNOTdsでデザインの学び直しを始め、5か月目に突入しました。 毎日新しい発見の連続で時間が過ぎるのは早く、5か月経った実感がまったくないほどです。

それでも振り返ってみると、確実に目が肥えてきた手応えがあります。 FigmaやIllustratorもまだ知らないことはたくさんありますが、「調べて練習すればもっと上達できる」と自分の成長を具体的にイメージできるようになりました。 以前は真っ暗闇の中をへっぴり腰で手探りしていた感覚でしたが、今は遠く前方に光輝くメンターの先生方の姿が見えている感じです（米粒大ですが）。

先日、WEBデザインコースの「サイト模写（応用）」課題をクリアしました。 28日間かけて取り組んだこの課題から大きな学びがあったので、記録しておきます。

「サイト模写（応用）」とは

模写したデザインの要素を分解し、再構成することで元のデザインとはまったく異なるデザインへリニューアルする課題です。

今回は「サイト模写（基礎）」で模写したサイトのデザインコンセプトやトンマナを分析し、全く異なるテイストへのリニューアルを目指しました。

参考サイトの分析

【サイトの目的】テクノロジーコンサルティングファームのサービスを分かりやすく紹介し、資料請求・問い合わせなどのリード獲得につなげる

【ターゲット】DX推進やデジタル活用による事業成長を検討している企業の経営者・DX担当者

【フォント】高い視認性と可読性を持つNoto Sans JPをメインフォントに採用。情報を素早く理解できるシンプルなサンセリフ体が、機能性と信頼感を同時に表現している。

【配色】信頼感・誠実さを表現するブルー系をメインカラーに採用。ホワイトベースで清潔感と可読性を確保し、補色のイエローをアクセントに少量使用することで画面全体を引き締めている。

【レイアウト】カード型レイアウトで情報をグループ化し、視覚的に整理。コンテンツ幅を2種類設定してセクションごとに変化を持たせることで、視線の流れとページ全体のリズムを生み出している。

リニューアルの進め方

分析をもとに、サイトの目的は維持しながらターゲットを20〜30代の実務担当者層まで拡張。より幅広い意思決定関与者への訴求を目指しました。

フォントとカラーを差し替えた5種類のトンマナ案を検証し、元サイトのブルー×ホワイトとは対極となる黒×オレンジの配色を採用。若年層からも共感が得られ、「事業への熱意・情熱」をダイレクトに感じさせるトンマナを選択しました。

次にレイアウトの検証。セクションごとに参考レイアウトを収集して模写し、パズルのように組み合わせて新しいレイアウトを構築。最後にデザインルールをガイドラインとしてまとめて完成です。

今回の検証では合計63種類のデザイン案パーツを制作し、組み合わせることで元サイトとはまったく異なるリニューアルに成功しました。

メンターからのフィードバックで気づいたこと

制作を通じて印象的だったのは、「合わないかも」と思いながら再構成した組み合わせが「意外といいかも！」に変わる瞬間が何度もあったことです。その感想をメンターのホリウチさんに伝えたところ、こんなアドバイスをいただきました。

• 「自分のデザインに流用するにはどうすればいいか」という視点を持ちながらデザインを見ることは難しいが、とても重要

• 手を動かすことで初めて得られる発見がある

• 「これ意外と使えるじゃん！」という気づきは、今後多くのデザインを参考にするうえでとても大切な考え方

• パッと見て不要と判断するのではなく、「まず手を動かしてみる」「まず抽象化して使えないか検証してみる」姿勢を大切に

このフィードバックを通じて、実務で参考サイトを見るときの心構えを学ぶことができました。自分の判断を過信せず、世の中の素晴らしいデザインからたくさんのことを吸収していきたいと思います。

現在は「コーポレートサイト制作」課題に取り組み始めたところです。 デザインの学習は、知識を増やすだけでは意味がなく、手を動かしてアウトプットしてこそ身につくもの。次の課題も楽しみながら取り組んでいきます。