ストーリー大阪を運営する、AIインタビューライター井原ちよさんのホームページを制作しました。
想いを聴く仕事を軸に、複数の活動と相談先を整理しています。
花と余白のあるデザイン、全12ページの漫画、ブログを通して、仕事の内容と人柄を一緒に伝える構成です。
三つの活動を、相談の目的で分ける
制作は、打ち合わせの記録と、既存の紹介ページを読み解くところから始まりました。 ストーリー大阪の運営、AIインタビューライター、娘・ネウネウの作品を届ける活動。 それぞれの資料には、ちよさんが取り組んできたことや大切にしている想いがありました。
私が最初に整理したのは、初めて訪れる人が、何を相談できるか分かる順番です。 活動名を同じ重さで並べると、いまの主な仕事を見つけるまでに時間がかかります。 そこで、ストーリー大阪の運営と、話を聴いて文章にする仕事を、サイト全体の中心に据えました。
サービスの入口は、取材・紹介記事のストーリー大阪、自分の案内先を持つストーリーホームページ、発信や仕事へのAI活用を学ぶAI仕組みラボの三つです。 役割の違いを説明してから、それぞれの詳しい案内と公式サイトへつなげています。 ネウネウの作品や活動は、ちよさんの歩みや仕事を知る具体例として紹介しました。
花と余白で、話しやすい入口をつくる
トップページでは、あなたの想いを、あなたらしい言葉に、というメッセージを大きく置きました。 実績や肩書きを読む前に、何を手伝う人なのかが伝わるようにしています。
花、ノート、カップのある明るいイメージに、白い余白、茶色の文字、明朝体を合わせました。 相談ボタンには水色を使い、落ち着いた画面の中でも次の行動を見つけやすくしています。 装飾的なロゴは使わず、名前はChiyo Iharaの文字で表しました。
写真にも役割があります。 花やノートは、話をする場のやわらかさを伝えるための生成イメージです。 本人の写真、作品、図解は、実際の活動や人柄を知るための資料として使い分けています。
スマートフォンでは、まず言葉と相談ボタンを読み、その後に写真が見える順番です。 パソコンの横長画面を小さくするだけでなく、縦に読むときの流れを整えました。
原点をたどる、漫画12ページをそのまま
サービスだけを説明しても、なぜ人の話を聴き、可能性を応援する仕事をしているのかは伝えきれません。 その背景を知る入口として、既存のプロフィール、写真、図解、4コマ、ストーリー漫画を活かしました。
長編漫画は、一部分の紹介で終わらせず、全12ページを掲載しています。 番号で読みたいページへ進み、一枚ずつ拡大して読める形にしました。 スマートフォンでも、細かな文字を読むときに拡大できます。
漫画の後には、現在の仕事や相談先へ戻れる導線があります。 物語を読んで終わるのではなく、ちよさんの考え方を知ったうえで、どんな相談ができるかを確かめられる構成です。
記事とサービスを、行き来できるように
取材を頼む前には、何を準備するのか、記事とホームページはどう違うのか、といった疑問が生まれます。 サービス説明だけに情報を詰め込まず、その疑問を一つずつ読めるブログを用意しました。
最初の記事は、取材前の準備、記事掲載とホームページの選び方、公開した記事を名刺とSNSにつなぐ方法の三本です。 各記事から、関連するサービスの説明、よくある質問、相談窓口へ進めます。
読む人が知りたいことから入り、必要になったところで仕事の案内を読む。 トップページだけに頼らず、記事も相談を考える入口になるようにつないでいます。
スマホでも、選びやすいブログ一覧へ
一覧では、記事ごとのサムネイルとタイトルを組み合わせました。 パソコンは3列、スマートフォンは2列にし、次に読みたい記事を比べられる形です。
画像に入った文字や絵が切れないよう、サムネイルは3対2の全体を表示しています。 記事のタイトルは画像の中だけに置かず、一覧の本文にも残しました。
通常の本文は、パソコン・スマートフォンとも18pxを基本にしています。 カードを増やすことと、小さな文字を詰め込むことは分けて考えました。 相談先やサービスの違いを読める大きさを保ち、余白と並び方で情報を整理しています。
独自ドメインで、更新を続けられる形に
ホーム、サービス紹介、プロフィール、活動例、よくある質問、ブログなど、全15ページを独自ドメインで公開しました。 見た目を整えるところから、公開後に記事を増やせるところまで、一続きで考えています。
ブログはWordPressの投稿として登録し、アイキャッチ画像も設定しました。 新しい記事を公開すると、ホームとブログ一覧へ反映される仕組みです。 固定ページの本文と共通メニューも、WordPressで管理できるようにしています。
公開時には、パソコンとスマートフォンで、ページ、画像、メニュー、ブログの移動、漫画の拡大を確認しました。 HTTPSで表示されることや、各ページへのリンクも合わせて確かめています。
人柄と仕事を、一緒に伝えるサイトへ
今回形にしたのは、仕事を知る入口と、その仕事につながる歩みを、同じ場所でたどれるホームページです。 花と余白のある第一印象から、サービス、漫画、活動例、ブログ、相談へと進めるようにしました。
こだわったのは、情報の見せ方を同じ形にそろえすぎないことです。 サービスは違いを比べられる形に、歩みは漫画でじっくり読める形に、ブログは関心から選べる形にしています。 内容に合う伝え方を選び、行き来する先をつなぎました。
いくつかの活動をしていて、何から紹介すればよいか迷う方へ。 まず中心となる仕事を決め、その背景や活動がどうつながるかを整理する方法が合うかもしれません。 すでに一つの商品と申込先が決まっている場合は、その商品を詳しく伝えるページを中心に考える方法もあります。
自分の仕事を説明する言葉と、その人らしさが伝わる見せ方。 どちらも大切にしながら、ホームページの役割を一緒に整理します。