• XHTML1.0
  • CSS2
  • 一部CSS3
  • jQuery
  • media query

Filastrocca

トラットリア【filastrocca】(架空サイト)

http://yane-ni-kabochano.com/filastrocca/
ページ数 5p (レスポンシブデザイン)
~500px/~950px/951px~で表示切り替え
使用ツール Photoshop , Fireworks , Dreamweaber ,
使用言語 XHTML1.0 , CSS2 , CSS3 (media-queries) ,
jQuery
コンセプト 地元食材を使ったイタリア料理店を想定して作成。20代以上の年齢層に向けて、比較的手頃な価格帯でありながら、大通りから少し離れた立地で落ち着いた雰囲気の店というイメージ。若い世代にも、上の世代にも利用してもらいたい。
備考 写真素材…フリー写真素材 「足成」
制作期間 2012年9月

レスポンシブデザインの勉強のために作成。media-queriesを使用しています。ブラウザの大きさによって3段階サイズ変化します。

題材はイタリア料理店を想定。モノトーンの内装イメージを全面背景に指定することで、落ち着いた店の雰囲気を出したいと考えました。

現在、特定のブラウザにて表示に多少のズレが出ます。
IE9/FireFox/Operaは通常表示可。safari/Chromeでは諸事情により、一部コンテンツ幅を通常より狭めた指定をしています。

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

制作時の思考あれこれ

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

コンセプトイメージ

イタリア食堂『トラットリア』

「レスポンシブデザインの勉強をしよう」と作成を開始したサイトです。スクールの先生から「レストラン・飲食店」というお題をもらい、イタリア料理店のサイトに決定。

キーカラーとして赤を印象的に使用したいと考え、布地のような陰影を加えて少し抑えた色合いで、headerやナビゲーションに配置しました(951~px版)。

レイアウト説明

これまでのレイアウトから変化をつける

これ以前に制作したサイトが、一般的な2カラム/3カラムのレイアウトであることから、それ以外のレイアウトでまとめたいと考えました。

そこからPC用サイズ(~951px版)のトップページは、サイドバー部分に画像をクロスフェードで、ナビゲーションを下方に配置するレイアウトにしてみました。が、PC用下層ページはナビゲーションをサイドバーに配置したため、なんだか使いにくいレイアウトになってしまったように思います。

950px~の中間サイズは普通のシングルカラムに変化しますが、こちらの方が使いやすい印象です。

透過背景の指定あれこれ

今回のデザインは、コンテンツ部分に対して透過背景を多用しました。backgroundの指定にrgba(rgb値と透過度を指定することで、背景色に透過カラーが指定できるアレ)を指定する方法をとりましたが、このrgba指定はIE8以前は非対応です。今回は全面背景を使っているので、べた塗り背景色では大幅に印象が変わってしまうため、IE8以前用にはpng透過画像で指定してあります。

しかしIE8で下層ページが表示されないという致命的な事態が判明。原因究明中。

対象ユーザーにはIEを使っている人の方が多いと思われるので、やはり最低限IE8くらいはちゃんと見えなければ用を成さないですね…。新しい技術を取り入れたいと考えたものの、コードの整理やブラウザ対応がおろそかになってしまっているサイトです。

スマホイメージ

レスポンシブデザインに挑戦する

複数のデバイスに対応させる方法の一つとして、世間的にレスポンシブデザインが浸透しているように思い(2011年末~2012年は特に)挑戦。とにかくmedia-queriesの仕組みを知ることを目標にしました。これまでリキッドレイアウトも作ったことがないのに、ちょっといろいろ無謀だった感があります。

とりあえず3段階サイズ変化させてみましたが、『単なる表示サイズの調整しただけ』という出来なので実践的な理解には程遠いサイトとなりました…。

ただし、今までにないレイアウトの練習・振り分け前提のコーディングという点では、とても勉強になりました。(いろいろ難しいな、という実感を得たということで)

タブレット、スマホ…デバイスの特性を考えてなかった!

これは反省点なんですが…。

各デバイスそれぞれの使用感や利点・注意点を理解していないままに作ったために、サイズ変化するだけで、各デバイスに本当に適したデザイン・内容にはなりませんでした。

サイトの仮アップ時、スクールの先生にスマホでアクセスしてもらい表示を確認しましたが、その時点ではViewport設定をし忘れたために、PCサイズデザインの縮小版が表示されました。

「…なんか、わりとフツーに見えるな…」

もちろん縮小版なので見辛いのは当然なんですが、拡大させれば本文テキストは読める。このサイト程度の情報量ならスマホ非対応でも読み切れてしまうな…、としみじみと実感することとなりました。

同一のソースコードでスタイルシートの振り分けによってサイズ対応できるmedia-queriesですが、もっと複雑な情報量の多いサイトの方が利点が多いのかもしれないと感じました。基本的にシングルカラムの少コンテンツなので、この程度ならmedhia-queriesでなくても…と若干後悔しています。

ページトップへ