バンドのイベントサイト構築:(3月の)振り返り

(こちらのサイトと違って間が開いています。スミマセン)
もう4月の尻尾が見え始めていますが、やり残しているたのでご報告です。
(遅くなって申し訳ない)

色々ぼやかしてますがこんな感じのができました:
otoniwa_20130415

反省とか勉強になったこと


  1. 手元のiPhoneで自作したwebフォントが見れなかった。時間と環境が無く、そのまま納品に…ヨクナイデス。
  2. iPhoneでのCSS(media-queries)とmetatagでの対応が難しい。まだよくわからない。
  3. 画像での曲線がやっぱり難しい。納得のいく線が描けなかった。
  4. iPhoneでPCと見え方を勉強する必要がある。Androidも。
  5. 重たい画像は軽くする処理を行うことで、かなりサイズがあっても大丈夫
    (by mashidaさん)

幾つもあって、色々勉強になりました。モバイルとPC向けのサイトの構築ノウハウについては今度の自習課題として取り上げたいです。

デザイン素材メモ:Design materials


はんなり明朝を使用しました:

フォント無料ダウンロード | Typing Art
http://typingart.net/

ギターっぽい曲線部分にレイヤーとして使用しました:

Retia Wood
http://subtlepatterns.com/retina-wood/

緑の背景レイヤ–に、GimpのBrumモードのレイヤーとしてかぶせて使用しました:

Natural Paper
http://subtlepatterns.com/natural-paper/

参考:References


media queriesについて:

[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

複数のmediaに対応するときの書き方。参考になりました:

レスポンシブ・ウェブデザインでの CSS コードの書き方
http://yomotsu.net/blog/2012/10/01/mediaquery-goodpractice.html

2011の記事だけど大変参考に:

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

iPhoneでのviewportを詳しく解説:

Viewport [iPhone生活]
http://ipn3g.com/web/study3.html

デザイン参考、その1:

Shiftbrain backyard
http://shiftbrain.tumblr.com/

デザイン参考、その2:

2011-2012 日本―フィンランド ダンス レジデンス エクスチェンジ 共同製作プログラム
http://jf2012.jcdn.org/about/index.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s