« ブログバナー変更 | トップページ | ブログバナー変更 »

2014年6月 8日 (日)

デザイン変更テスト。

 部活サイトのデザイン、もう4年前くらい?のなので、使い勝手もあんまりかなぁと思い、試しにリニュテスト。

 今までのみたいなやつだと、ナビゲーションがイマイチだったのと、ぱっと見の、開いた時に取れる情報量が少ないなと。

 現行↓

20140608_web_now

 色合い的な雰囲気は悪くはないとは思うものの。
 ちょっと変えたいなぁと。

 ☆ テスト。

 テンプレート借りて試行錯誤してるやつの、本日の最終形態。

20140608_slideinmenu_smp

 モバイルサイズになった時に、ナビゲーションが隠れて、メニューボタンで横からスライドインするやつです。
 画像が少ないので軽くもなるし、情報もとりやすいかなと。
 (メニューの頭のはアイコンフォントです)
 これができるとすごく見やすいと思うの。

 ↓ちなみにiPad・タブレットサイズ版だとPCと近くてこんな感じ。
 ナビゲーションはタイトル下の黒一色のバーになってるんですけど、こっちは、その下が一工夫してあるところ。

20140608_ipadtab

 ↓PC版は、横長になるので、フロートを使って横並びになるようにしています。
 (モバイルファーストという考え方を取り込んでいます、今までと逆ですね)

20140608_pc

 色とかそういうとこはまだまだなので、また考えたいな;;

 ☆ RSS取得と最新記事の表示。

 あと、今回特筆すべき?点として、ブログの記事の新着を直接取り込めるようにしました。
 これは当時したかったけどできなくて、ネットで公開されていたRSS取得のブログパーツに頼っていたのですが。
 今年の春先に書かれた分かりやすい記事を見つけまして、チャレンジしてみました。
 (ここのブログすごい可愛いのでそれだけでも見て下さいーwかわいい)

ブログのRSSを読み込んで新着記事を表示!Google AJAX APIを使ってみました(2014 01/20)

 できるかなーと思ったんですが、強制的に読み込ませる改造方法も使って、なんとかできましたよ!
 すごいーこういうのの技術というか公開されるツールの使い勝手の進歩も、解説を書いて下さる方のがんばりも、ほんとうにありがたいです…!

 ↑PC版画像の下半分、ブログから取得した最新記事が3つ、出ています。
 画像も自動で取り込まれるので、来た方により興味を持ってもらいやすいかと…!
 (画像がない場合は専用の代替画像を指定できるので、今は現行サイトのヘッダー画像から使ってます。)

 なんというか、自分で作ってるせいかと思うけど、これいいよ。早くリニューアルしたい。
 (まだ下の子に相談してないけど相談しに行かねば…;;;)

 今後サイトの更新は停止して、ブログとtwitterとかSNSで手軽に最新情報をアップしまくっていってもらう方がいいなと思いw
 更新に手間のかかる&ハードルの高いwebサイトは置いておくだけ、でいいようにしたいんですよね。

 今度どこかでテストアップして実機で検証してもらおうかな…

 とりあえずそんなこんな。
 (こういうのは新歓対策として年度変わる前に済ませろよって話はなしでお願いしますにゃ…)

|

« ブログバナー変更 | トップページ | ブログバナー変更 »

コメント

文字の量が多いページが読みづらいと思ったことがあるので、そこも変えますか?
画像は今みたいにたくさんなくてもいいと思います。でも綺麗な和風イメージのがあるといいですね。

投稿: さくら | 2014年6月10日 (火) 09:58

わーありがとうございます。
えっと、部活の関係者ですか?あとでこっそり教えてください!w

ご意見参考にさせていただきます~♪

投稿: ひなた | 2014年6月11日 (水) 10:19

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/129339/59781768

この記事へのトラックバック一覧です: デザイン変更テスト。:

« ブログバナー変更 | トップページ | ブログバナー変更 »