sutudio nob-san

web
wasabi

絵本作家山本省三さんのWEBサイト

ツール
photoshop / illustrator / dreamweaver
技術
wordpress / xhtml1.0 / css2.1 / jquery
ゴール
手がける本の紹介の他、ブログなどの情報発信をして本だけでは分からない山本さんのパーソナルな部分をより知ってもらう。
問題
山本さんがデジタル系に弱いため、なるべく簡素な作業で更新ができるようにした。
制作期間
一ヵ月半
URL
http://yamamotoshozo.jp/
詳細
絵本作家で日本児童文芸家協会理事の山本省三からの依頼で情報発信するWEBサイトを設計・構築。手がける本が紹介できてにぎやかなイメージが良いとの事ですが、明確なイメージがなかったので提案しつつ内容を決めました。
手がける本の紹介はアマゾンへリンクできるようにして、さらにイラスト紹介や、講演会、ワークショップ、ブログなどの情報発信を通して本だけでは分からない山本さんの魅力を紹介してファンを増やす事を目指しました。

【デザインイメージ】

・なるべく絵本作家さんと分かイメージしやすいようにアナログテーストのイメージでスケッチブックのメタファーを土台にし、ナビゲーションや、見出しラベルなどを手描き風にしました。
また、バナーやメインイメージのイラストを山本さんに依頼して仕上げました。

【システムと運用方針】

・公開後の運営は山本さんにやっていただくのですが、山本さん本人がブログなどの経験がありませんのでなるべく分かりやすく更新できるようなワードプレスの設計を心がけました。
また、プラグインを活用してアマゾンのページにリンクして実際に購入できるようにした。

【掲載コンテンツ】

メインは山本さんが手がける本の紹介と販売につなげる事、そしてイラストのギャラリーや、絵本以外での活動(ワークショップや講演会)などの情報を発信して絵本からは伝わらない魅力を紹介してファンを増やす事を目的としています。

>> 絵本作家山本省三さんのwebサイトはこちら

プロフィールページ

【色の設計】

一つのページのUI(見出し、ローカルナビの文字色、グローバルナビゲーション)は一つの色を中心に展開している。
※7つのグローバルナビゲーションボタンは虹の7色に合わせた色展開です。

【コンテンツの内容について】

WEBサイトに訪れた人が山本さんをより深く知りたいと思い読むページを想定して原稿を依頼・文章構成をしました。
簡単な自己紹介から始まりデビューから現在までの物語を掲載する事により共感してもらえる事を狙っています。
文章の最後は山本さんの思いを読者へのメッセージとしてまとめてもらいました。

>> プロフィールページはこちら

サービス紹介ページ
サービス紹介ページ

本の紹介ページ

【プラグインの利用と入力ミスを防ぐ例】

書籍の紹介ページはカスタム投稿タイプで構築していますが、書籍の画像と情報はプラグインでアマゾンから取り込んでいます。
また、管理画面での登録は入力ミスが起きないような設計を目指しました。
例えば、アマゾンから取り込んだ書籍情報は固有の識別情報を含んだショートコードですが、ショートコード入力時はミスを防ぐためにカスタムフィールドの一箇所に登録をしてそれ以外の情報は別のエリアに登録するように設計しています。

【CSSデザインの工夫】

書籍情報の登録は負担を減らすために一箇所にとどめ、出力されるHTMLコードをページごとにスタイルシートでをコントロールしています。
>> 本の紹介ページはこちら

イラストギャラリーのページ

多くの人にイラストを見てもらうために用意したコンテンツで、カスタム投稿タイプで処理をしてアーカイブで一覧を出力しています。
作品の基本情報はカスタムフィールドにて出力をして、詳細にリンクしています。



>> イラストギャラリーのページはこちら

サービス紹介ページ

Page Top

Copyright @ 2012 studio nob-san.All Rights Reserved.