お久しぶりです。
ご注文はかとうですか?
あぁ^～心がみょんみょんするんじゃぁ^～
ぐる娘の、PC版ページをリニューアルいたしました。
デザインリニューアルをするにあたり、「気が向いたから」「デザインに見慣れて来てしまったから」などでリニューアルを行うのではなく、きちんとした理由をもって臨もうと考えました。
リニューアル時に気をつけることは
サイトリニューアルの工程と参考にしたいサイトまとめ
http://liginc.co.jp/web/design/75063
LIGさんのこちらの記事を参考にさせていただきました。
趣味サイトとはいえ、きちんと行動することが大切なのです。
下記3点を書き出しました。
・目的はなにか(リニューアルの)
・現時点の問題点はなにか(リニューアルする前)
・ワイヤーフレーム作成してみよう
リニューアルの目的は何なのか
・新コンテンツの追加
インスタグラムやLINE＠のアカウントの開設、また、コラボレーションや新企画を走らせる予定はあるかどうか
・ユーザビリティの向上
文章の読みやすさ・サイトのつかいやすさなど、UI/UX面でも検討し、Google Analyticsのクリックイベント・ページ遷移を考慮してデザイン・コンテンツの再検討
・機能面での変更
写真をみせていくだけではなく、文章や、またストーリー仕掛け、共有したくなるような機能案など
そんなことより、みなさま僕にチョコレート渡すの忘れてません？だいじょうぶ？
問題点なう
・カテゴライズや構造化がされていない
食べたもの・撮った場所・お店などの情報がバラバラとなっていて、整理されていないため、コンテンツ同士のつながりなどが薄い?
・なんか薄い
ぱっとしない
・コラムをみつけづらい
トップからの流入が見込めぬ
・別にサイドバー固定の必要ないちゃうんかな
上述、サイトを見なおしたところで出てきた改善点を挙げました。前のPCサイトをデザインしたのも自分ですからブーメランですね。日進月歩です。日清といえばラーメンです。
つまり、こういうことだってばよ
・もう少し写真が目立つ感じの
・コラムがわかりやすい場所にある感じの
・ナビは上部の
・なんかまあいい感じのデザイン
上記を踏まえた上で、個人的には
グリッド・カードデザインが作りたかったので、それを採用しました。
それでそれで？
いつも使っているWordPressのテーマ(というかフレームワーク)は、Underscores | A Starter Theme for WordPress。
これは骨組みだけある、って感じのやつです。
CSSとか特に何もはいっていないので、1からですけど。
で、こんかいは、SASSを使ってみたかったので、sass/style.scss といった感じにしています。
教科書はこれ
インプレスジャパン
売り上げランキング: 21,621
すごく書きやすいです…SASS…
Windowsでは、rubyのインストールやらやらめんどくさいですが、Macはちちんぷいぷいです。
これは、コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編を参考にしました。
ちなみにまだCompassはうまく動いてくれません。誰かへるぷみー。
——-実装案件——-
・ヘッダーnavの固定
・横幅100%のスライドショー
・グリッドデザイン
・インスタグラムのAPI
・追随するサイドバー
———————
■ヘッダーnav固定
こちらは、スクロールしたら、っていうjsです。
特に複雑なことはしていないので、割愛。
ついてくるナビメニューは、
同じくLIGさんの、
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法
http://liginc.co.jp/web/html-css/html/92474
こちらもいいかなって思いました。
■スライドショー
スライダーは、
Slider Proを。
[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-slider-pro.html
http://gimmicklog.main.jp/jquery/340/
aspectRatioの扱いにすごく困りました。
なんだよお前的な。
縦に対する横の比率というのに気づきました。
■グリッドデザイン
一度はやりたいグリッドデザイン。
カードスタイル！！
世の中には便利なものがあってですね、http://960.gs/ あら便利。
グリッドデザインで参考にしたサイトには、
http://dena.com/jp/
http://www.visitsuffolk.com/
http://www.firebox.com/
http://torideken.com/
http://2-5-d.jp/
みなさんおしゃれです…(そりゃそうだ)
■インスタグラムのAPI
ぐる娘、インスタグラム始めてます。
→ https://instagram.com/gurume.girl/
こちらもLIGさんの
Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法
http://liginc.co.jp/web/service/other-service/146750
特に問題なくできました。
ちなみにインスタグラムの各画像ページURLは、
$photo->link
でした。
■追随するサイドバー
記事ページ、サイドバー、writer/photographerってとこ。
ついてきます。
jqueryを使ったフローティングメニューの作り方【簡易版】
こんなかんじです。
ちなみに、ぐる娘のリニューアルをやる度に思うんですが、
何時間と、画面と向き合うじゃないですか。
特に、スライドショーの調整とかで、大画面の女の子と向き合うわけさ。
もうリニューアル終盤にもなると、軍場を駆け抜けた友みたいな感じで、何回もあったことがある気がしてくるし、かなり仲良くなった気になってくるんだよ。
いやもうほんと。
では、お疲れ様でした。