兵庫県明石市の木下ブンセイ出版印刷のホームページを制作しました。 印刷・製本から、Tシャツ、紙とデジタルの連携、カブス出版までを手がける会社です。
大切にしたのは、それぞれの仕事が、人の想いや経験を届ける活動としてつながって見えること。 しろくまくんと「元気の種」を、サイト全体の中心に置きました。
明るいオレンジと波形の区切り、四つのサービスへの案内を組み合わせ、作りたいものから相談へ進めるホームページに整えています。
仕事の広がりを、ひとつの想いでつなぐ
制作の出発点は、幅広い事業をどう紹介するかでした。 名刺やチラシを作りたい人、本を残したい人では、サイトで探す情報も違います。
そこで、具体的に頼める仕事と、その背景にある想いを行き来できる構成にしました。 サービスでは用途から選び、私たちについてのページでは、木下明子さんの歩みや本づくりへの考えに触れられます。
「元気の種プロジェクト」は、一人ひとりの経験や言葉を、本にして届ける取り組みです。 誰かの想いが、別の誰かの力になる。 このつながりを、トップページの見せ方にも重ねています。
しろくまくんを、つながりの案内役に
会社のしろくまくんは、ロゴのそばにも、ページの見出しのそばにも登場します。 本や芽を持つ姿を、小さな案内役として配置しました。
トップのイラストには、名刺を手渡す人、本を囲む人、Tシャツを作る人たちを描いています。 人物の間を細い線や芽でつなぎ、いろいろな仕事の先に、人との関わりがあることを表しました。
しろくまくんのメッセージ入りの絵も、想いを伝える場所に生かしています。 サービスの説明とキャラクターが同じ方向を向くように、置く場所と大きさを調整しました。
オレンジと波形で、あたたかなリズムを
配色の中心は、明るいオレンジと生成り、白です。 背景の色を切り替え、波のような曲線でセクションをつないでいます。
丸みのある見出し、角を丸めたカード、風船や小さな飾りも、この雰囲気に合わせました。 本文の周りには白い余白を取り、写真や文章を落ち着いて読める間隔にしています。
親しみのある見た目の中で、仕事の内容や相談先が見つかること。 その両方を意識したデザインです。
四つのサービスを、作りたいものから選ぶ
サービスは、印刷・製本、Tシャツ・グッズ、紙とデジタル、カブス出版の四つに整理しました。 カードごとに色を分け、写真と短い説明から詳細ページへ進めます。
詳しいページでは、作れるものや使う場面に加え、相談のときに用意するとよい情報も案内しています。 用途や数、希望する時期など、まだ決まっていないことも含めて相談できる流れです。
トップページには、ご相談からお届けまでの流れと、よくある質問への入口も置きました。 作りたいものを選んだ後の疑問にも、続けて目を向けられる配置にしています。
スマホでも、文字としろくまの大きさを整える
通常の本文は、PC・スマートフォンとも18pxを基本にしています。 画面が狭くなったときは、写真と文章を縦に並べ、メニューを開いて各ページへ進める形にしました。
しろくまくんは、見出しや本文の読みやすさと釣り合う大きさに。 大切なキャラクターが自然に目に入り、伝えたい言葉にも視線が向くようにしています。
公開後の発信も、同じホームページで続ける
今回のサイトは、固定ページ13件と読みもの3件の、全16ページです。 WordPressで公開し、新しい読みものがトップと記事一覧に並ぶ形にしました。
名刺を渡した後の伝え方、Tシャツを相談する前の準備、家族に渡す一冊の本づくり。 こうした読みものからも、サービスの内容へつながります。
お問い合わせには、相談分野や作りたいものを入力できるフォームを用意しました。 電話やメールも含めて、相談の入口をまとめています。
仕事と、その背景を、一緒に伝えるホームページへ
完成したサイトでは、四つの仕事と、木下さんが大切にしている想いを、一つの場所からたどれます。 しろくまくんや色、写真、文章の並びを、そのつながりに合わせて整えた制作事例です。
いくつかの事業を紹介したいときは、共通して大切にしていることから考えると、最初に伝える言葉も選びやすくなります。 今あるサービスと、仕事の背景を整理するところから、一緒に進められます。