クリック編集とAIデザインアシスタント

完成したピラティス予約サイトがあります。ところが見出しが2パーセント物足りなく、ボタンが少し小さく、写真がわずかに左に寄っています。以前なら開発者にリストを書き送って何日も待ったでしょう。このコースが終われば、あなたがその場で直接直します。クリックして、つかんで、放せば終わりです。

VibeCampusの編集は2つの手をくれます。ひとつはクリック編集。要素を直接選択して動かし変える精密な手です。もうひとつはAIデザインアシスタント。方向だけ言えばプランを立てて全体を変えてくれる、大きな手です。

先に言っておくと、間違って触っても大丈夫です。元に戻すがいつでもありますから。このコースでは思い切り壊して戻しながら学びます。

ビルドが開いた状態で「クリックして編集」ボタンを押すと、編集モードがオンになります。プレビューの上に案内が出ます。クリックで選択、ダブルクリックで入力、右クリックで詳細。この3つの動作が編集のすべてです。

編集モードでは、プレビューがキャンバスに変わります。マウスをのせると要素ごとに枠がうっすら表示され、今何をつかめるのかが目で分かります。サイトがレゴブロックのように触れる状態になった、と考えればOKです。

直し終えたら完了を押すと、編集モードが閉じて結果が保存されます。オンにして、触って、閉じる。リズムはこれだけです。

直したい文字をダブルクリックしてみましょう。その場所がすぐ入力状態に変わります。見出し、ボタンの文言、価格、紹介文まで、画面に見えるテキストはすべて、こうしてその場で直せます。別途編集画面を開く必要はありません。

一回のクリックは選択です。選択された要素には青い枠が付き、この状態で動かしたりサイズを変えたりスタイルを磨いたりできます。選択がすべての編集の出発点です。

望んだ要素ではなくその親(もっと大きな塊)がつかまれることがあります。慌てずもう一度クリックしてみてください。クリックするほど内側の要素へ選択が絞られていきます。

選択した要素はドラッグで動かせます。写真をつかんで右へ、ボタンをつかんで中央へ。マウスから手を放した場所が新しい位置になります。

選択枠の角と辺には小さな点、リサイズハンドルが付いています。このハンドルをつかんで引くとサイズが変わります。角のハンドルは縦横を一緒に、辺のハンドルは一方向だけ調整します。画像は比率が崩れないよう、角で調整するのが安全です。

動かして伸ばすのはいちばん直感的な編集ですが、いちばん事故が多い編集でもあります。一度に大きく変えず、少しずつ動かしながら全体のバランスを見ましょう。

ドラッグが勘の編集なら、インスペクターは精密の編集です。要素を選択すると、色、間隔(内側の余白と外側の余白)、フォントのサイズと太さ、角の丸みのような属性を、値で直接調整できるパネルが開きます。

インスペクターが輝く瞬間は、統一が必要なときです。ボタン2つのサイズが微妙に違うなら、目分量のドラッグの代わりに、2つの要素の値を同じ数字にそろえれば完璧に統一されます。プロのデザインの秘密は、すごいセンスではなく、同じ数字を使うルールです。

色を変えるときは、ブランドカラーのカラーコードを直接入力しましょう。「だいたい似た青」が積もるとサイトが汚れて見えます。正確なコードひとつをすべての場所に使うのが一貫性です。

複数の要素の列をそろえるときは、整列ツールを使いましょう。左揃え、中央揃え、間隔の均等のような整列は、目分量よりいつでも正確です。カード3枚が微妙にずれているのと、定規で測ったようにそろっているのとの差は、訪問者が無意識に感じ取ります。

選択した要素は、キーボードの矢印キーでも動かせます。マウスでは難しい1ピクセル単位の微調整にぴったりです。大きくはドラッグで、最後のひと押しは矢印キーで。この組み合わせが手編集の完成形です。

削除キーで不要な要素を消すこともできます。誤って消したら、やはり元に戻すがあなたの味方です。

要素を右クリックすると、その要素を対象にしたAIアクションのメニューが開きます。この段落だけ短く、このセクションだけ再デザイン、この画像を差し替え、のように、全体ではなく今つかんだ部分にだけAIを呼ぶ機能です。

手編集とAIアクションの分業はこうです。位置、サイズ、色、文言のように答えを自分が知っている修正は手で。「この紹介文をもっと魅力的に」のように答えを作ってもらう修正はAIに。つかんだ要素に正確に適用されるので、他の部分が変わる心配がありません。

AIアクションは通常の編集料金でクレジットを消費します。実行前に予想消費が表示されるので、確認して進めればOKです。

今度は大きな手です。AIデザインアシスタントはPro機能で、部分修正ではなくデザイン全体の方向転換を引き受けます。「サイト全体をより上質に、色はネイビーとゴールドに」のように目標を書くか、用意された方向ボタン(より上質に、より明るく親しみやすく、ブランドをより力強く、よりすっきりミニマルに、フォントの組み合わせを変更、新しいカラーテーマ)から選べばOKです。

特別なのは、すぐには変えないことです。アシスタントはまずいくつか質問し、答えを反映したプランを見せてくれます。どの色をどこに、どのフォントをなぜ、何を維持するかが書かれた計画書です。あなたがプランを読んで承認したら、そのとき変更が適用されます。

維持したいものを先に言うこともできます。「口コミセクションはそのままにして、料金セクションを追加して」のように。ひっくり返すのではなく、指揮するのに近いのです。

道具を学んだので、基準を学ぶ番です。第一に、コントラスト。重要なものとそうでないものが、はっきり違って見えるべきです。背景と文字の明暗、大きな見出しと小さな本文。コントラストが弱いと、何も目に入ってきません。

第二に、ヒエラルキー。視線が移動する順序を、デザインが決めてあげるべきです。見出し、紹介、行動ボタンの順にサイズと色の強弱を付ければ、訪問者は設計された道に沿って読みます。全部強調すると、何も強調されません。

第三に、余白。初心者のデザインは埋め、プロのデザインは空けます。要素の間の空きスペースは無駄ではなく、上質さの材料です。窮屈に見える画面は、たいてい余白不足が犯人です。

構造と内容は気に入っているのに、雰囲気を完全に変えたいときがあります。そんなときは全体リスタイルを使います。AIデザインアシスタントに「内容と構造は維持して、スタイルだけミニマルなモノトーンに全部変えて」のように頼めば、レイアウトと文言は残り、色、フォント、質感が丸ごと着せ替えられます。

リスタイルの前後を見比べるのも勉強になります。同じ内容がトーンひとつでどれだけ別の事業に見えるか、ブランドにおけるスタイルの割合を体で知ることになります。

リスタイルの後には細部の点検が必要です。全体が変わる大きな作業なので、一部のボタンの色や写真のトーンが新しいスタイルとずれることがあります。クリック編集で仕上げの磨きをするところまでがリスタイルです。

いよいよあなたのビルドで実戦です。スタジオでマイ作品をひとつ開き、編集モードをオンにしましょう。なければ、どれかのテンプレートからひとつ作って始めてもかまいません。

目標は完璧なデザインではなく、3つの手の動きを体に付けることです。直す前と後を比べられるよう、始めるときに画面を一度目に焼き付けておきましょう。

編集は自動で保存されます。画面の自動保存の表示が、あなたの代わりに保存ボタンを押してくれているので、保存を忘れて作業を失う心配は下ろして大丈夫です。

気に入らない変更は、元に戻すで一段階ずつ取り消せます。そして大きな変更の前には、自分で帰ってくる地点を作っておくのがプロの習慣です。今の状態が良いなら、保存を確認してから次の実験を始めましょう。

この安全網の本当の意味は、実験する勇気です。いつでも戻れるという確信があってこそ大胆な試みが生まれ、大胆な試みから良いデザインが生まれます。

もうあなたは、サイトを見ていて物足りないところが目についたら、その場で直す人です。クリック編集という精密な手、AIアクションという部分支援、デザインアシスタントという全体指揮まで、3段階の道具を扱えるのですから。

コントラスト、ヒエラルキー、余白。この3つの言葉は、道具より長持ちする資産です。これからどんな画面を作っても、この基準で見る目が一緒に付いていきます。

次のコースは、信頼できる成果物です。見た目よく磨いた成果物の中身を、世に送り出してよいのか検証する、ローンチ前の最後の関門を学びます。