ファンサイトへの道の最近のブログ記事

前回の記事はこちら
http://arashi3.com/2010/05/fan002.html


ちょっと時間が空きましたが次は下層デザイン。
ページ上下部分は共通項目になるのでそれ以外を。
ページによって背景は変えていきます。


まずは「PARA-SOLとは？」というページから。

作品をある程度自分の言葉で紹介したかったので、
参考資料をもとにライティング。

文章が書き終わったらフォトショにテキストを貼ってレイアウト決め。

決めたレイアウトに沿ってタイトルやら画像やらを入れる。

キャラクターメニューの上に主なコンテンツのメニューを入れる。


駆け足ですが、デザイン完成。

例によってスライス状態でｗ


余談ですが、
Twitterでフォトショ使ってレイアウトしたりしていることに驚かれたのですが、
紙媒体メインの人はイラレとかでやってるんですかね〜。

webでは高解像度はほぼ使わないので、
個人的にはフォトショで十分な気がします。

とはいえこれが答えではないので自分のやりやすい形を模索するのがいいと思います。
ちなみに僕はイラレまったくわかりませんｗ


ある程度方向性が固まったのであとはスムーズにいく・・・はず・・・。


ってことで続く・・・。


ツイート

前回の記事はこちら
http://arashi3.com/2010/05/fan001.html


とまぁデザインの次はコーディング。
この作業は非常に地味？なので見た目的な何かはないんですけど、
今まで使ったことなかったCSSのdisplay:absoluteを使ってみた。

出来上がったのはこれ
http://para-sol.arashi3.com/


ぱっと見flashっぽいような雰囲気を漂わせていますが、
htmlとCSSしか使ってません。
というか僕flash使えないんですわｗ
（昔背景が勝手に動いていくflashを作って挫折）

基本的にどのブラウザでも見られるようにしたかったので以下の点に気をつけてみた。

・PNG24はIE6非対応なのでPNG8を使用
・クロスブラウジング対応（IE8、IE6、Firefox、Opera、Safari、Chrome動作確認済）
・1280×1024ですべてが見え、1024×768でもファーストビューを意識
・ボタンは基本オンマウス対応

ってな感じです。

IE5.5以下はごめんなさい無理だと思います。
あと携帯もたぶん無理。

ボタンはCSS仕様でほぼ背景画像なので現状は印刷非対応。
（これはそのうちなんとかします）

ソースコードはぶっちゃけひどいです。
見ないほうが幸せですｗ


次は下層ページのデザインかな・・・。
どこから手をつけようかな。


ってことで続く・・・。


ツイート