LOGzeudon

名古屋で働いているWebデザイナーのブログです

はてなブログをカスタマイズしてPinterest的なことを試みた話

f:id:rokuzeudon:20160223195923j:plain

はてなブログを実験的に活用してみた例を紹介してみます。 

つくったもの

テーマをECサイトに絞ったWebデザインのギャラリーサイトです。

後述の仕様により著作権的にブラックな感じがするので、個人利用にとどめ非公開です。

f:id:rokuzeudon:20160223195954j:plain

一覧では3カラム表示にして、デザインの雰囲気をパッと見で判断できるようにしてます。

f:id:rokuzeudon:20160223200022j:plain

詳細ページは1カラムです。1ページ丸々スクショして、それをアップしてるのが特長。

f:id:rokuzeudon:20160223200054j:plain

カテゴリ分けしていて、似たテイストや目的のデザインを比較できるようにしています。

実際はこんな流れで使います。

  1. Chromeのアドオンで、ページ全体をスクショ、画像をローカル保存
  2. Photoshopで一覧用画像を作成
  3. 記事投稿
    1. タイトル入力
    2. 画像(一覧用、閲覧用)アップ
    3. HTML編集(「続きを読む」設定と、class指定で一覧用画像設定)
    4. カテゴリ選択

画像の加工は一括でやれば良いのですが、記事の投稿はそうもいかないのが面倒です…。

なんでつくったのか

いいと思ったECサイトのデザインをキャプチャしておいて、デザインの勉強に使ってます。

ECはコーポレートやブランディングサイトに比べると、変化のスピードは早いしリンク切れにもなりやすいので、画像にしてとっておくのが良いです。

具体的には、「クリスマス」や「ハロウィン」など季節限定のページがその季節にならないと見れない、とか。

ですが、ECは基本的に縦にめちゃくちゃ長いページばかりなので、Finder管理だとかなり見づらく、探しにくいです。それをどうにかしたかったです。

なぜはてなブログなのか

はてなブログでデザインギャラリーは作れるんだろうか?」という興味で作りました。Pro契約もしてるし。

はてなブログ」じゃないとダメっていうのは正直なくて、WordPressでもMovableTypeでも同じことができると思います。

他の画像管理系サービスとの比較

Pinterest

今回は、一つのデザインに対して複数のカテゴリを指定したかったのですが、Pinterestだとボードを一つしか選択できないのが不満でした。

普段は、おしゃれなデザインやかわいい動物、美少女画像を眺めるのに使っています。

jp.pinterest.com

Ember

一覧表示の時に縦が短くてファーストビューしか見えないのが不満でした。

高いですが、psdやaiも管理できてKUSO便利なアプリなので、パーツや写真素材の管理で使っています。 

Ember - Screenshot, Annotate and Share

Ember - Screenshot, Annotate and Share

  • Realmac Software
  • グラフィック&デザイン
  • ¥4,000

まとめ

一括で記事登録したい(CSVなど)、というのはありますが、その他はよくできていてわりと満足しています。でもやっぱりもっと楽したいので、良い方法を探したい…。

はてなブログ、一覧が3カラムのテーマって案外需要ありそうなものですが、どうなんでしょうか。ニーズと時間があればテーマ化して公開してみたいと思っています。