読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

サイトプレゼン【iPhone 5の噂・流出情報まとめサイト|iPhone噂.com】

その他

iPhone5の発売の噂・流出情報まとめサイト|iPhone噂.com

2ヶ月間の勉強の成果であるサイトのプレゼンが終わりましたのでポイントをまとめてみたいと思います。

ロゴ


アップルと同じフォント(Myriad)を使用しPhotoshopで作成。
灰色だけでは寂しいので「噂」は昔のリンゴマークのような虹色のグラデーションに。

ナビゲーション

CSS3で作成。

  • 角の丸み(border-radius
  • グラデーション(gradient)
  • 影(box-shadow、text-shadow)

ビルボード

文字は、

  • 日本語:AXIS
  • 英語:Myriad

のフォントを使用しPhotoshopで作成。

iPhone 5予想画像はiPhoneモックアップ用PSDを改良して作成。

新着

定義型リストで作成。

噂・流出ページ

最新の5記事を表示。過去の記事は月別アーカイブから。

検証ページ

iPhoneに関する研究記事を紹介。

予想ページ

自分が欲しいと思うiPhoneの機能をPhotoshopで作成し紹介。

アンケート

Google フォームで作成。

スマートフォンに対応

メディアクエリーで幅が480px以下の場合はスマートフォン用のCSSを読み込むように指定。

IE対策

IE9:問題なし
IE8:問題なし
IE7:ネガティブマージンが効かない問題
IE6:透過png&ネガティブマージンが効かない問題

今後の課題

  • IE対策
  • 各記事を充実させる
  • 予想ページに新しいものを追加する
  • TwitterFacebookRSSアイコンを設置する
  • フッタにも情報を載せる
  • Googleフォームのカスタマイズまたは他のフォームを検討
  • スライドギャラリーの設置