第3回 更新情報を楽しく掲載したい!|シリーズStudio SPECホームページリニューアルのポイント紹介

ホームページ制作に関する記事も今回で3回目です。
毎朝、Studio SPECのホームページのアクセスをチェックしているのですが、今朝はニューヨークからのアクセスがありました。

うーん、グローバル。と思っていたら、現在世界一周中の友人がニューヨークから前回の記事を閲覧してくれただろうカウントでした。ありがとう。

ちなみにその友人から「ガラケー(フィーチャーフォン)もレスポンシブに対応できるのか?」と聞かれました。
確かに、まだまだガラケーのシェアも根強いですし、気になるところですよね。携帯電話本来の機能だけでよいって人も多いですしね。
で、結論として同じ技法で対応できるのですが、スマートフォンに比べてガラケーが表示できる容量は非常に少ないのと、ガラケーでは対応できない表現方法などが存在するので、そのあたりの考慮がポイントになります。

話はもどり、今回は更新情報に関するお話です!

目次

  1. Flashを使わずに動きのある表現を!
  2. スマートフォン、タブレットPC対応にしたい!
  3. 更新情報を楽しく掲載したい!←今回はここです。
  4. 各サービスを解りやすく区分けしよう!

更新情報を楽しく掲載したい!

サイトのタイプにもよりますが、世にある多くのサイトのトップページに盛り込まれているコンテンツとして、更新情報欄があります。
サイトに更新や新しい情報の追加があった際、ユーザーにそれを伝える大切なコンテンツです。

Studio SPECの場合、大きく分けて「Studio SPECからのお知らせ」「Web Hosthingからのお知らせ」「SPEC Design Collegeからのお知らせ」併せて今回Blogも始めましたので「Blogの更新のお知らせ」があります。
これらの更新情報がいっしょくたになっていると、何の更新があったか解り辛いと思います。

01

てことで、リニューアル時のポイントとして、これらの更新情報を解りやすく仕分け出来るような仕掛けを設置しようという事になりました。でもって折角だから楽しい動きでという訳です。

それではStudio SPECの更新情報部分のご紹介です。

更新情報部分

02

このように全ての更新情報がいっしょくたになっています。Show allといった状態です。
全ての更新の中から10件が表示されるようにしています。また、更新記事に画像が入っている場合は一番最初に登場する画像が表示されるようにしています。

Blogの更新のみ知りたい場合

03

このようにBlogの更新のみ選択されます。

その他の更新

04

タイル状に更新情報が詰まっていく仕掛けなので様々な画像のサイズにも対応できて、詰まりかたも区分け毎に変わるので楽しいです。
ちなみにShow allをクリックすると、もとにもどります。

勿論、レスポンシブにも対応

05

スマホで閲覧した場合は画像が消えるように設定しています。

更新記事の該当カテゴリーも表記されるようにしています。こちらをクリックすると該当カテゴリーの一覧ページへ移動します。

06

もしよかったら皆さんもさわってみて下さいね。

なんでもかんでも派手な仕掛けを施せば良いって訳ではありませんが、ちょっとした工夫でサイトを使いやすく、または楽しくすることが出来ます。

もし、ホームページにちょっとした仕掛けや便利さを加味したいと思われている方がいらっしゃいましたら、お気軽にお問い合わせください。

次回は最終回。「各サービスを解りやすく区分けしよう!」です。

Facebookコメント