• XHTML1.0
  • CSS2
  • 一部CSS3
  • WordPress

two virtues

コーヒー豆販売【two virtues】(架空サイト)

http://yane-ni-kabochano.com/WordPress/
ページ数 9p(ブログカテゴリ別ページ含む)
使用ツール Photoshop , Illustrator , Fireworks ,
Dreamweaber , WordPress
使用言語 XHTML1.0 , CSS2 , 一部CSS3
コンセプト 自家焙煎のコーヒー豆販売店を想定して作成。性別を問わず『気軽に身近に』がテーマ。個人経営店のイメージで、少し手作り風の質感を目指しました。
備考 写真素材…フリー写真素材「足成」
ブログ記事使用写真…自分が撮影したもの
カード風素材…古いもの素材集
制作期間 2012年1月

広く利用されているWordPressの使い方を知るために作成しました。初WordPressサイトです。

個人経営のコーヒー豆屋のサイトを想定して作成。すっきりとした印象にするため、ベースに淡グレー、サイト上下やナビゲーションに黒を設定。サイト全体のカラーを無彩色でまとめ、素材や装飾、リンクの水色で印象を和らげてみました。

  • サイトイメージ
  • サイトイメージ
  • サイトイメージ

制作時の思考あれこれ

サイトを作るにあたって、学習目標やサイトの目的を明確にして取り組みたいと考えていました。
以下はこのサイトを制作するにあたって考えた・感じたことをまとめています。
(サイトの出来にはあまり関わりのない取り組み姿勢的な部分なので、読み飛ばし可)

コンセプトイメージ

個人経営のコーヒー豆屋(喫茶もあるよ)

自家焙煎のコーヒーショップ(豆販売・喫茶スペース有)のイメージで作成。サイトの目的は、【常連さまへのマメな情報発信】【新規客の獲得】です。


コーヒー豆専門店ということで、無彩色を中心に、少し落ち着いた色合いにまとめました。

全体を通してノート罫線やカード、スタンプ風の装飾など、クラフト感のある素材を使用することで、気軽さや手作業のイメージを強調。もとより豆選びを楽しんでいるという層も、なんとなく敷居が高いと感じている層にとっても、気安さや身近さを感じるような店の雰囲気を表現したいと考えました。

ブログイメージ

WordPressのブログ機能を活かしたい

「ブログ感覚の情報更新」はWordPressの利点の一つです。どうせなら、販売品目に直接関わるブログをコンテンツとして加えよう、と考えました。

特に新規客への印象付けを重視し、初心者向けの記事を適宜更新することによって、愛好者予備軍を抱え込もうという狙いです。中でも『淹れてみたいが難しそう』『興味はあるが扱いが分からない』といった初心者層へのアピールを意識した【入門編】的な話題を取り扱っています。
初心者層が徐々にこの店を利用してくれて、地道に売上アップしたらいいですね、と。

そんな草の根活動の意識が根底にあるサイトです。

ドリップコーヒー

WordPressで、まずは1サイト

「WordPressを利用したサイトが広く普及している以上、とりあえず1サイト作って勉強してみよう」から始まった今回のサイト。

WPで基本的なサイトの組み方を学ぶというのが第一目標でした。

固定ページ・投稿ページの使い分けや、さまざまなPHPファイルの使いどころを理解するのに四苦八苦しました。カスタム投稿タイプにて新着情報の管理、トップページは新着情報の更新のためhome.phpを使用しました。

PHPの理解はまだまだ浅いため、しばしば行き詰ることが多かったサイトです。

ブログコンセプトに沿った写真を撮るために、普段よりコーヒーを淹れる機会が増えましたが、左手でコーヒーを淹れ、右手で写真を撮ってみたりと、バカバカしい素材作りがいい気分転換でもありました。

ページトップへ