サイト模写応用課題を通して感じた思考プロセス整理の重要性

1. はじめに：今回の課題について

• 課題内容： 「サイト模写基礎」で題材にしたサイトをリニューアルする（サイト模写応用）。

• 要件： 既存サイトの情報を保ちつつ、トンマナやデザインを刷新する。

2. 制作プロセスと直面した「壁」

リニューアルにあたり、まずは以下の手順でリサーチを行いました。

• 参考サイトの収集とトンマナ（カラー、フォント、世界観）の抽出。

• 抽出したトンマナを、リニューアル対象のサイトに当てはめてみる。

ぶつかった壁：どうしても「パクリ」になってしまう

参考サイトのワイヤーフレームをそのまま使い、既存サイトの情報を流し込んでみたところ、「参考サイトのデザインに、ただ情報を当てはめただけ」になってしまい、オリジナリティのない、いわゆる「パクリ」のような状態に陥ってしまいました。

3. ブレイクスルー：視点を情報量に変える

そこで、アプローチを以下のように変更しました。

• 改善策： ファーストビュー（FV）に載せたい「情報量」が同じくらいの参考サイトを探す。

• 実践： 新たに4つの参考サイトを選定し、それらを組み合わせて新しいFVを作成。

• 展開： FVの世界観を壊さないよう、各セクションもトンマナに合わせて一つずつ丁寧に再構築。

既存の情報（コンテンツ）は変えず、かつ参考サイトのコピーにならないように「ミックスして表現する」作業は大変でしたが、これにより独自性のあるデザインへ昇華させることができました。

4. AI活用の試みと気づき

制作の補助として生成AIにも「デザインのミックス」を依頼してみましたが、うまくいきませんでした。

• 結果： それっぽいFVにはなるが、世界観が変わってしまったり、修正の手間が多い。

• 学び： AIに的確な指示（ディレクション）を出すためには、自分自身の「デザイン基礎力」が不可欠であると痛感。基礎を磨くことが、将来的なAI活用の鍵になると感じました。

丸投げだとうまくいく

こんな適当なプロンプトであれば、綺麗なリニューアルプランをサイトごと提案してくれます。非常に楽なんですが、自分の作りたい世界観の再現は難しいと感じました。

このサイトのリニューアルを行います。叩き台を提出してください

世界観やユーザー層など細かな指示を入力していくと、途端に使いにくいサイトに変化してしまいます。この辺りがAIに使われる人と使う人の差なのではないでしょうか。

• AIに使われる人：的確な指示が出せず、出力に対してフィードバックができないもしくは抽象的すぎる

• AIを使う人：的確な指示を与え、再現性のある指示出しができ、フィードバックも具体的。自分の頭の中に完成イメージを持っている。

個人的にはデザインテンプレートの使い方に近いのかなと感じています。
デザインテンプレートは少しでも崩す（英語を日本語に変更や文字サイズの変更）と一気にダサくなってしまう。テンプレートを使いこなすためには、デザイン基礎を学び、応用する力が必要だと感じるので、AI活用と非常によく似ていると思いました。

5. 最大の学び：デザインは「逆」から考える

今回の課題で得た一番の学びは、「情報設計と情報整理」の重要性です。

• 以前の自分： 「なんとなく良さそうなサイト」を見つけ、それを真似して作ろうとしていた（装飾先行）。

• 今回の気づき：

  1. まずテキスト情報を整理する。

  2. 「このセクションに載せたい情報量」と似ている参考サイトを探す。

  3. そこからデザイン表現を適用していく。

いきなりあしらい（装飾）を探すのではなく、「自分が扱いたい情報量に適したレイアウトを探す」という、これまでとは逆の発想が必要であることに気づけました。
これができないと、情報とデザインが噛み合わず、サイトとして成立しません。

6. 次のステップへ：言語化能力の強化

次の課題は、疑似クライアントへのデザイン提案です。 今回の学びを活かし、単に作るだけでなく「なぜその変更をしたのか」を論理的に説明する必要があります。

• 自分の思考プロセスをメモに残す。

• デザインの意図をしっかりと「言語化」できるようにする。

これらを意識して、提案資料作成のフェーズに進んでいきたいと思います。