ぱくたそ大規模リニューアル完了!もっと使いやすくを考えた新旧比較と追加機能

ぱくたそリニューアル2014

キタ――(゚∀゚)――!!

利用者の皆様お待たせです!
やっとこ、ぱくたその大規模リニューアルが終わりました。(‘A’)ノ”

ここまで協力してくれた関係者の方々本当にありがとうございます。当初公開予定だった5/19から延長の延長。新しい写真の更新も2週間ほど停止し、ファンが離れてしまうのではなかろうかとドキドキの毎日でした。更新作業がないおかげで、約3年ぶりに昼休み休憩を満喫することができたのは内緒ですけどね。

っというわけで、本日6月5日(木曜)13:00頃ぱくたその大規模リニューアルを公開致します。

今回の記事では、大規模リニューアルで改修・追加した点などを解説します。テクニカルディレクターのYuuさん によるページ最適化など必見です。

旧ページと新ページを比較してみよう。


前回のリニューアルはちょうど1年前(3000枚の大幅リニューアル)、早いものですね。('A') 読んでて若いなーっと感じるのはきっと成長している証拠かしらね。

1年前のリニューアルはコードを半分残しながらの制作だったので、生成時に余分なものが表示されていたり、エラーが吐き続けられたまんまだったりと非常に残念な状態でした。

penginkora_468eb114-7624-485c-8433-6347b68e5621 

(再構築だけは4時間でしたけどもね。)

再構築4時間

んで、今回は、MT東京 ぱくたそ/PAKUTASOのスライドでもご紹介した通り、テクニカルディレクターのYuuさんに設計から見直しをしていただき、

git デビューです。 

git デビューを果たすなど、色々と改修されていったわけです。

では、デザイン面から確認してみましょう、こちらが旧トップページ。

旧トップページ 

こちらが新トップページ

 新ぱくたそ

以下より改修したポイントを説明します。

キャッチコピーの変更


pakutaso_logo2014

「使って楽しい、見て楽しい」

ぱくたその広報兼モデルで、最近はキャッチコピーライター化しているマルチタレントのフリー素材大川さんに名付けていただきました。

 

「使って楽しい、見て楽しい」を新しいキャッチコピーにします!
このコピーには写真素材をダウンロードして使うデザイナーさんや編集・ライターさんだけではなく、写真素材を見て楽しむためにぱくたそを訪れてくれる方がひとりでも増えてくれたらな、という想いが込められています。


なんという想いでしょうか!素晴らしいですね。('A')

おススメ写真素材の表示

オススメ写真 

オススメ写真素材の枠を大きくしたことで、 「新しく追加された写真」を下の方に移動、これでサイトを開いたときに「新しく追加された写真」は1画面上に表示されなくなります。なぜこのような仕様にしたかというと、企画・コラボを行った際、同じ写真がスライドと「新しく追加された写真」に表示されてしまう為、まるでサイトジャックのような印象を与えてしまうからです。また、以前のバナーは導線が弱かった為、より印象を与えるような効果も期待しています。

検索窓にホットなキーワードを表示

よく検索されるタグ 

新しくなったフレキシブルサーチ(tinybeans/jq-plugin-flexibleSearch · GitHub)では、パラメーターを渡すことができるので、例えば季節ごとに使われやすいキーワードを表示させるなど、使い易くなりました。

カテゴリの表示を改善

カテゴリ部分

以前のツリー型カテゴリを廃止して、メインカテゴリのみの表示に変更しました。これによってサブカテゴリ増加の抑止に繋がり、再構築時間の大幅削減になります。選択後は、写真一覧の上にタグリストを表示することでサブカテゴリより詳細なワードを選択することが出来ます。
 
タグ一覧

このように、カテゴリでよく使われるタグを表示しています。

Webフォントの導入

Webフォント

旧ぱくたそではアイコンを画像で表示していましたが、新ぱくたそは表示速度改善から、Webフォント(Font Awesome Icons)を導入しています。(ソーシャルアイコンなども全てWebフォントを利用しています)

グローバルメニューの変更

グローバルメニュー部分

旧ぱくたそでは「サイトについて」でしたが、これを「ぱくたそについて」に変更しました。上のロゴが英語表記「PAKUTASO」なので、「ぱたくそ」っと呼び違える人が多いため、ロゴの下に「ぱくたそについて」を持ってくることでヨミガナ的な効果を考えています。

次に、グローバルメニューのリンク先ですが、以前は管理者目線で設定していたため、「人物・モデル写真」はモデルの紹介ページが表示されていました。(人物・モデルリリースの紹介)新ぱくたそのグローバルメニューでは、写真の一覧を優先にして、そこから詳細に飛べるよう変更しました。

検索結果が崩れてしまうバグの改善


フレキシブルサーチずれる

旧ぱくたその検索は、画像を一気に取得してからメイソンリーが走る為、このように画像表示が崩れる事が多々ありました。多分この1年間で最も要望をもらったバグでございます。新ぱくたそでは、フレキシブルサーチのアップデートやYuuさんの実装によって改善しています。

写真の個別ページ

こちらが、旧ぱくたそのエントリページ

旧ぱくたそエントリ

新ぱくたそのエントリページ

新ぱくたそエントリ 

だいぶフラットな感じに仕上がっております。まず一番の注目点は、写真のダウンロード項目ですね。

写真のダウンロード

旧ぱくたそは、ダウンロードするのにライトボックスが表示されるので2クリック必要でした。新ぱくたそでは、ライトボックスを廃止して、画面上から直接ダウンロードすることができるようになり1クリックで完了します。便利になってます。

関連写真などに表示されるサムネイルには、+ アイコンを実装。

画像一覧

以前、ネタ帳の山田さんに書いていただいた記事。

個人的に無料素材数80596枚の足成より3746枚のパクタソを使ってしまうたった一つの理由*ホームページを作る人のネタ帳

ダウンロードさせるというのはもちろんそれらのDLデータを取得するために、運営側としては必要な行為なのかもしれないのですが、パッと使いたいという時はものすごいネックになります。
また、一時的な利用にしか使わない画像を、わざわざダウンロードしてたら、今度は消さないといけないので、とにかく様々な視点から見て面倒臭いわけです。わがままですね。ごめんなさい。


ぱくたその写真素材を使うには、利用規約を読んで同意さえしてくれれば問題ありません。なので、山田さんの利用方法はむしろもっとやってくださいレベルでございます。

というわけで、「さらに使いやすくしましょう」のYuuさんによる提案から実装となりました。サムネイル上で写真の拡大。ツイート、Facebookシェア、google+まで行えるようになっています。写真素材の大喜利が多くなっているので是非とも活用していただければ幸いです。

純広告はじめます。


pakutaso_new_ad

新ぱくたそから、右下の広告枠を募集します。

今夏、サクラVPSの16GBに移行予定(月額16,333円)だったり、Web制作・保守契約、PSGIの導入や改修、撮影のロケハン(例のプール)、メイクさんの契約、スタジオ機材の購入、などなど、更に使い易いサービスを提供するには、アドセンスだけでは厳しく(僕の会社員としての給料から自腹)、純広告を募集することにしました。

全部で6枠(合計8枠)の募集となっています。個人・法人様のお問い合わせお待ちしております。

 

旧と新ページのスコア

Movabletype の全ページ静的による Nginx フル活用のお時間です。まずは、GTmetrix | Website Speed and Performance Optimizationでの比較です。

旧ぱくたそ
GTmet旧ページ

新ぱくたそ
GTmet新ページ

Page Speed Grade 72% → 93% になりましたね。

お次は、PageSpeed Insightsでの比較です。

旧ぱくたそ

旧ぱくたそgoogle

新ぱくたそ
新ぱくたそgoogle


53→76

最後は、WebPagetest - Website Performance and Optimization Test いってみましょう。

旧ぱくたそ

webpagekyuu

新ぱくたそ

webpagenew

リクエストが 231→90 First View も10s → 6.6s に改善されております。('A')



以上、今回の改修した点などをご紹介させていただきました。

他にも、こまごました部分を修正していますので、ソースを見るなりして確認ください。そんなぱくたそ大規模リニューアルの公開は本日6月5日(木曜)13:00頃となっております。ぜひとも、F5の準備をしながら全裸で待機してくださいませ。

pakutaso_icon_512 

PAKUTASO/ぱくたそ-すべて高品質の無料(フリー)写真素材

おしまい。('A')