• クライアント : ポアンカレ書店様
  • URL : ポアンカレ書店
  • したこと : ウェブサイト制作
  • 担当業務 : ロゴ画像以外のデザイン全般, WordPressカスタマイズ, HTML&CSSコーディング, 情報設計, レイアウト設計
ポアンカレ書店のサイトのマルチデバイス状況

概論

ポアンカレ書店様のウェブサイト制作を行いました。ロゴ画像以外のデザイン、情報設計、コーディングを担当しました。キーカラーには、お城の形をしたお店の屋根の色をモチーフとして採用しました。完成した後の運営にも少し携わっています。

詳細

作るにあたって考慮した点

実装はWordPressで行いました。ウェブサイトが存在する前から、オーナーさんはSNSを積極的に活躍していらっしゃいました。そのため、サイトには、フローしていってしまっては困る情報を詳しく多く載せるようにしました。また、WordPressの投稿機能の更新が負担になると考えたため、フロントページには最新記事一覧を表示させず、代わりにTwitterの最新投稿をAPIを通じて呼び出すようにしました。

カスタマイズのポイント

WordPressの代表的プラグイン、「Advanced Custom Fields」には、唯一といってもいいほどの欠点があって、それは「時間の値を時間のデータ型としてデータベースに保存できない」というものです。本プロジェクトでも、このプラグインを積極的に利用しましたが、イベントの開始、終了日時の管理には、WordPressのメタボックスを自作しました。これによって、イベントが開催中であるか否か、開催中のイベントがあるかなどが表示可能になっています。

他には、ツイートの埋め込みをするにあたって、Twitterのウィジェットをそのまま埋め込むのではなく、codebirdを使って、デザインの統一感を損なわないようにするなどしました。

デザインのプロセスについて

Phiyardでは、Photoshopを使ってデザインカンプを描くことはしていません。その代わりに、デザインについては、手書きワイヤーフレームとスタイルガイドを用いて提案しました。これによって、クライアント側は、実際に動く形でおおまかなデザインを把握することができ、制作者側にとっては、作業の効率化につながりました。