Framer AIでプロっぽいレイアウトを一瞬で作る
デザイン性の高さで定評のあるFramerには、テキストで指示するだけでレイアウトを生成するAI機能があります。「なんとなくオシャレなサイト」を目指すなら、まず試してみる価値のあるツールです。
Framer AIが選ばれる理由
Framerはもともと、プロのWebデザイナーやプロダクトデザイナーの間で「デザインの自由度が高いツール」として評価されてきたプラットフォームです。近年、そこにAI機能が追加され、テキストで「どんなサイトを作りたいか」を入力するだけで、洗練されたレイアウトを自動生成できるようになりました。Wix ADIが「質問に答えて選んでいく」形式なのに対し、Framer AIは「文章で指示する」形式に近く、より柔軟な指示出しができるのが特徴です。
実際に触ってみると、生成されるデザインのクオリティの高さに驚く人が多いはずです。フォントの選び方、余白の取り方、セクションごとのメリハリなど、いわゆる「今っぽい」デザインのトレンドがしっかり反映されており、Wix ADIよりもややデザイン重視・トレンド重視の仕上がりになる傾向があります。特にポートフォリオサイトやブランディングを重視したいスタートアップ、クリエイティブ系の事業者との相性がとても良いツールです。
一方で、Framerは操作感がやや上級者向けです。生成されたレイアウトを自分好みに調整する際、Wixほど直感的ではない部分もあり、多少の慣れが必要になります。この後のSTEPで紹介するツールの中では、「デザイン性を取るか、操作の分かりやすさを取るか」というトレードオフの一つの選択肢として捉えるとよいでしょう。
できること
Framer AIのもう一つの強みは、スマートフォン表示への最適化がかなり自然な点です。PC画面で作ったレイアウトが、スマホでもレイアウト崩れを起こしにくく設計されており、レスポンシブ対応にかかる手間を大きく減らしてくれます。
実践のステップ
Framerのアカウントを作成する
公式サイトからアカウントを作成し、新規プロジェクトで「AIでサイトを生成」のオプションを選びます。
サイトの内容を文章で指示する
「〇〇業の会社のコーポレートサイト。信頼感がありつつ親しみやすい雰囲気で」など、STEP6で整理した情報をもとに、できるだけ具体的な文章で指示を出します。
生成結果を確認し再生成する
気に入らない場合は指示文を変えて何度でも再生成できます。色味や雰囲気の希望をより具体的に書き足すと、狙った方向に近づきやすくなります。
テキスト・画像を自社のものに差し替える
レイアウトが決まったら、Wixのときと同様に、仮のテキストや画像を自社の内容に置き換えていきます。
メリット・デメリット
メリットは、いわゆる「垢抜けた」デザインを短時間で得られることです。特にデザインに自信がない事業者にとって、プロが作ったような見た目に近づけるのは大きな安心材料になります。デメリットは、料金プランがやや高めに設定されていることと、日本語のフォントや縦書きなど、日本特有のデザイン要素への対応がまだ発展途上な部分がある点です。日本語での見え方は、生成後に必ず自分の目で確認する習慣をつけましょう。
気をつけたいポイント
- 英語圏発のツールのため、日本語フォントでの表示崩れがないか必ず確認しましょう。
- デザイン性が高い分、情報量が多いサイトには不向きな場合があります。シンプルな構成のサイトと相性が良いです。
- 公開前に、実際のスマートフォンで見た目を必ず確認してください。
まとめ
Framer AIは「見た目の質」を重視する人にとって強力な選択肢です。次のSTEP10では、さらに手軽に、わずか30秒でサイトの土台を作れるDurableを紹介します。