人とAIで作り出す次世代の制作
FOCYMのサイトが完成しました。
おもに私、泊がデザインや設計を行い、佐藤がコピーを担当。
サイト内で使用されている写真は吉山、動画は東が担当しています。
今回サイトを作る上でのテーマは人×AI。
AIにコーディングを任せて制作をしました。サイト自体は簡易なサイトではありますがフロントエンドだけでなくバックエンドも含め構築しています。ここにどうやって人が介入したかその一部を記事にしてみようと思いましたので是非お読みください。
ラフから始まる、デザインの現実
もろもろ制作前にコンセプトやそのサイトの役割など決めることはたくさんありますが
それらが固まれば実際にデザインに入ります。
コンセプトをもとにラフスケッチを起こします。
アイデアを大まかに落とし込んだラフをもとに、AIツールでビジュアルを出力してみると——それなりの見た目にはなります。でも、「なんか違う」と感じる部分が必ず出てきます。
フォントが重い。余白が均一すぎる。要素の並びに流れがない。情報の優先順位が視覚に反映されていない。
パッと見は整っているのに、なぜか読む気にならない。そういうデザインです。
「なんか違う」を「ここが違う」に変えるためには、問題を的確に言語化しなければなりません。
見出しの文字サイズをもう少し落として、本文との差を縮める。行間をこの比率に調整する。この要素とこの要素の間には、ほかの箇所より広めの余白を入れる——。
AIに対して指示できるのは、なぜそうなっているのかを理解しているからです。「なんとなく」を言葉にかえるのが
『経験と知識』だと思っています。
今回は本サイトのアバウトページがわかりやすかったので例にあげました。
非常にシンプルで情報はほぼ文字ベース。
文章は全てわかれているようでつながっている。そんな構成です。
①最初から読んでいただければFOCYMの背景や経緯が見え→
②そこから提供できるもの→③実際のフローが簡単にまとまっています。
「なぜそうなるのか」を言語化できること
それでは最初の出力されたhtmlページです。
本ページは
『コピーをたたせシンプルなテキスト構成の読み物として作る。』
ことを意識しています。キャッチコピー本来の味を十分に発揮させ
その意味を理解したもらう。
「塩だけでお召し上がりください。」
というイメージ？そんなコンセプトがあります。
まずここで課題なのは最初にのべたように
①最初から読んでいただければFOCYMの背景や経緯が見え→
②そこから提供できるもの→
③実際のフローが簡単にまとまっています。
この3つの要素で構成されるページになるので
セクション＝グループを大きく3つにまとめるのが情報の整理として必要です。
第一段階で出力されたデザインは、見出しに対しデザイン背景が4つ存在します。
あくまで前段から、背景と想い→サービス→依頼という構造なので
「経営に効く、精鋭。それがFOCYM」「FOCYMの4つの特徴」これはサービスの性質を説明していますので内容や見せ方は違えどサービス説明なので一つのグループです。
そうしてセクション整理したものがこちら、これだけで情報の整理ができましたね。
テキストのみのデザインですが、見出し余白背景の色で大きく3段階のグループ分けがあることが理解できます。
サービスなどのセクションタイトルを設けてグループを区切ることも改善方法の一つかもしれませんが
コピーをたたせて読み物としてのページ完成度を高めるをコンセプトに制作しています。
コピーで興味関心と内容で肉付けしていくような。テキストページにしたかったのです。
どうでしょうかまずはグループの理解と同時にコピーへの目線がいきやすくなりました。
こまかなところを言っていくと見出しがそろっていないなど色々修正指示していますが
その中でもこちらに注目↓
一見特に違和感はないように思いますが実はここに一本線を引くだけでデザインの機能美がぐっとあがります。
「FOCYMの4つの特徴」の左右に線を引きました。この線があることで「経営に効く、精鋭。それがFOCYM」が単独してキャッチコピーとして性質、独自性があること、言葉の強さを強調しながら上段からの読み物としての機能を継続しています。そして線をひいた「FOCYMの4つの特徴」はその4つを指すものが白のボックス4個であることを瞬間的に理解させます。さらにこちらはキャッチではなく見出しとしての意味合いがでます。
見比べてみると同じグループ内でもテキストの扱いや装飾を変えるだけでリズムが生まれ、のっぺりとしたカテゴリーに瞬間的に理解できる区分けが生まれました
ビフォー・アフター
ちょっとの違いなんですが
右に行くにつれてただ綺麗というだけでなく「コピーをたたせシンプルなテキスト構成の読み物」としてその目的を達成しやすいページになっていきました。変わっているのは、細かい数値やわずかな余白の調整です。でも、読んだときの感覚はまったく違います。情報が自然な順番で目に入り、大事なところで視線が止まり、全体として「読める」デザインになっています。情報整理に基づいたデザイン。この差が、デザインの精度です。
人に伝わる、人の気持ちを読む、だって人だから
デザインは、最終的には人が見るものです。
どこに目が行くか。何が先に読まれるか。どこで離脱するか。そういったことは、数値だけでは測れません。
見てきた量、作ってきた量、そして実際のユーザーの反応——そうした積み重ねが、「ここをこう直せば伝わる」という判断を支えています。
コンテンツの質を高めることが、私たちの仕事です。
経営に効くデザインをご提供します。
Artdirector designer 泊 裕一
