前回の続きです
4ページの会社HP制作というバーチャル案件を勝手に作り、その提案としてHTMLベースの3ページと独自設計の簡易ブログという提案をさせてもらいました。
今回はHPの顔となるトップページをデザインしてみようと思います。
■ちょいふる美容室のHPをモダンなデザインに変えてみる
前回のブログのバナーページもネタとしては面白いですが、現実的にはあり得ませんので別案件のデザインにします。
正直に言うと私自身、20年ほど前の業務で行ったHP作成も、デザインと呼べる物はほぼやっておりません。
デザイン性の高いページは外注のデザイナーさんにお願いして、そのデータをWebシステムに組み込めるように加工しただけです。あと少しボタンなどのデザインをWebデザインの本を参考に作っただけです。
ですので、良い機会ですからこのバーチャル案件からHPのトップページをデザイン起こししてみましょう。
ですのでテーマとして開設して時間が経ち、古くさくなったサロン（美容室）のHPをリニューアルします。
（例：2010年代に定番だったショップ系デザイン）
■AIデザインの現状
デザインを実質上したことのない私がトップページのデザインを行うのならば、嘘隠すことなく言いますが、AIを使います。
そのAIデザインも日々進化しており、もはや一昔前のトップレベルのサイトデザインは再現できると言って良いでしょう。
事実、ここ2〜3年でHP制作の費用感は完全に二極化しました。
Web幹事やLISKULといった業界メディアの2026年最新版を読み比べてみると、共通して指摘されているのが「AIやノーコードツールの普及によって格安で作れるサービスと高品質な制作会社への二極化が加速している」という分析です。
低価格帯のサブスク型サービスは、月額数千円〜1万円程度で制作から運用まで任せられる形態で、流行のノーコードツールは、WixやJimdo、ペライチなどを使って自分で作るか、制作会社にテンプレートカスタマイズを依頼する形。依頼するとなると3〜10万円程度。
また、「自然言語からコードを生成するAIツール」も進化し、V0（Vercel）、Lovable、Bolt.newといったツールは「いかにもAI」感のない、プロが作ったかのような視覚階層・タイポグラフィ・配色を備えるレベルに到達しています。
まとめると、ひと昔前なら30万円相当の見栄えが10万円台で出せる感じです。
その流れに対して、フロントエンドのデザイナー戦略は、けっこう温度差があるようです。
■対抗するデザイナー達
AIの台頭に対するHPデザイナー達の戦略というとよく言われるのが、
・ブランディング・世界観への特化
・上流工程へのシフト
・プロンプトエンジニアリング能力
・80点を作れるAIに対する最後の20点の微調整役
・WEBマーケティング力との統合
内容はうっすいので割愛。
どの業界でも言われる空虚感のある言葉ばかり。つまりポジショントーク。やれたら苦労しないよ。
で、実際に現場で動いている戦略はというと、
・業界特化への深掘り
特定業界の慣習・客層・規制を深く理解した上でテンプレ化したパッケージを売る形
・ブランディングを売り物にした高単価ゾーンへシフト
100万円以上のブランディング案件・採用サイト・周年プロジェクトに集中する動き。ロゴ、コピーライティング、写真撮影、世界観設計まで含めて売る
・「AIを使いこなすプロ」というポジショニング
「AIに置き換わる側」ではなく「AIを置く側」に回るアプローチ
他にも「運用フェーズへの軸足移動」「コミュニティ・教育への横展開」
なども。
AIの台頭によってどの業界も右往左往ですが、デザイン系のような直接ビジュアルに直結する業界は特に大変です。
プログラムコードはAIが生成するコードに不具合があれば大変なことになりますが、アート界隈は厳密さがエンジニアリングと違い"良い意味で緩い"ですから、AIの"80点"も受け入れられてしまう土壌があるのでしょうね。
■モダンだがオーソドックスなAIデザイン
デザイン畑でない私がAIと共に作成しました。デザイン専門ではないとは言え、一応世間のトレンドは押さえてます。
今回はサロン向けということなので2種採用しました。
1. Bento Grid（弁当グリッド）
日本の「お弁当箱」のように、さまざまなサイズの長方形や正方形のカードを隙間なく並べるレイアウト手法。Appleの製品紹介ページやiPhoneのウィジェット画面などが火付け役となりました。
採用の狙いは、情報アクセス向上と安心感の提供。
美容室には「メニュー」「スタッフ」「ギャラリー」「空席確認」など、ユーザーが素早く確認したい情報が多くありますので、これらを整理するのにBento Gridは最適です。
2. Editorial Design（エディトリアルデザイン）
もともとは雑誌や新聞、書籍などの「紙媒体の編集デザイン」を指す言葉ですが、これをWebに応用したもの。単なる情報の羅列ではなく、タイポグラフィや余白を駆使して「物語（ストーリー）」を読ませるデザインです。
狙いはブランドの形成。単なる「髪を切る場所」ではなく、「ライフスタイルや美意識を提案する場所」としての価値観をもたせた、"意識高い系"です。大きな余白と洗練されたフォントで、オーナーのこだわりやサロンの空気感を雑誌のように表現し、価格ではなく「このセンスに任せたい」という感情に訴えかけてます。
これらをAIに説明し、出力したのが以下。よくできてはいますが、まあ普通のAIデザインかなと。
皆さんはどちらが好みでしょうか？
Bento Gridと Editorial Design
■おまけ。
サロンのHPと言うとお客様との写真をトップページにしてますが、証拠にも無くヘタクソなイラストを入れてみました。
フリーの写真や、下書きをAIに入れてまともにすれば良いのでしょうが、もう意地ですね。
AIで手軽に作れることがQOLを上げることに直結しないことを自ら証明してます（笑）
