• XHTML1.0
  • CSS2
  • 一部CSS3
  • jQueryプラグインeasing scroll

veget8

野菜販売【veget8】(架空サイト)

http://yane-ni-kabochano.com/veget8/
ページ数 1p(トップページのみ)
使用ツール Photoshop , Fireworks ,
Dreamweaber , jQuery
使用言語 XHTML1.0 , CSS2 , 一部CSS3
コンセプト 地元農家から直送の野菜販売サイトを想定して作成。「若い世代向け」、メイン商品の野菜と、地元農家の魅力をアピールするサイトをイメージしました。
備考 写真素材…「フォトバイブル」
制作期間 4日(2012年3月)

野菜販売のサイトを想定して作成しました。食べ物が商品なので、明るさや彩度を意識し、メイン商品である野菜が魅力的に見えるよう大きく画像を配しました。

トップ画像は野菜そのものの写真ではなく、身近な『食材』としてのイメージを強調できる調理後の写真を使用しました。

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

制作時の思考あれこれ

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

コンセプトイメージ

産地直送の野菜販売

トップページのデザイン練習のために1ページのみ作成。

地元の農産物を直送販売するサイトという想定で制作しました(当初はそんなつもりではなかったのですが、なんだか『ら○ぃっしゅ○ーや』さんみたいですね…)。

販売品目の野菜に対して、【新鮮さ】【栄養・健康】【おいしさ】をイメージさせたいと考え、インパクトのある明るいオレンジ単色遣いでまとめました。

『野菜を食べる』ことを印象づけるため、トップ画像に野菜満載サンドイッチ写真を採用。新鮮食材のアピールとして、画面の大部分を占めるサイズで配置しました。

サイトイメージ

大きく画面全体を使ってみる

制作当時(印象としては2011年半ばあたりから?)画面を大きく使ったデザインが主流となってきたように感じ、その流れを反映して、全体的に大きくゆとりのある画面構成のサイトを作ろうと考えました。


具体的には、サイトの左右をボーダーで囲わずに全面白背景として、トップ画像をより大きく主張させつつ、ゆったりとしたコンテンツ配置になるよう意識しました。

各コンテンツに大きくイメージ画像を使用

今回のサイトの目的は
【1:商品の販売・アピール】
【2:商品である野菜を身近にすること】
【3:生産者と消費者をつなぐこと】と仮定しています。

サイト説明と、販売商品・新着情報をまとめ、まず販売サイトとしてのコンテンツを上部~中央に、バナー類やイメージ付のためのコンテンツは下部に配置しました。

下部コンテンツはサイト目的の2~3に関連する『+α』的な要素となります。商品の印象・魅力を底上げするためのコンテンツとして、視覚的にイメージしやすい写真を使った画像リンクにしてみました。

2カラムイメージ

バナーの練習

圧倒的な引き出しの少なさを何とかすべく、今回もバナー練習をPhotoshopで(もともと架空サイト制作自体、デザイン練習を兼ねているのですが)。

学習面では「まだ使ったことのないCSSの指定を自然に取り入れる」ことを目標にしていました。今回は基本的なCSS3角丸と、CSSロールオーバーの指定に透過を利用しました(過去作ではtext-indent:-9999を利用)。


単色でのまとめ方を練習

サイトイメージ

今回のサイトはロゴのカラーに合わせて、ほぼオレンジ一色のデザインとなりました。イメージカラーでまとめることで全体の統一感は出しやすかったのですが、テキストリンクなどの色合わせやサイトのアクセントの付け方に悩みました。

footer付近のデザインに『ページトップへ戻る』を画像リンクにして加えてみました。マウスをのせると絵が少し変わります。jQueryのeasingScrollを使用。

無農薬なイメージのつもりでしたが、サイト内容的に害獣はモチーフにするべきではない気はしています。

ページトップへ