当サイトのブログコンテンツ【プログラミングナレッジ】にて過去記事「Instagram APIでインスタグラムのタイムラインをサイト内に実装する 」「Instagram APIで取得できるJSONからいろんな情報を表示する」で、InstagramAPIを使ってウェブサイトにインスタグラムのタイムラインを表示させるサンプルを作成しました。今回は、この作成したタイムラインにデザインを施してみたいと思います。  

Instagramのギャラリーページとしてどんなデザインにするか？

インスタグラムは写真が正方形というのが一つの特徴です。また今回は出力できる投稿数が合計20件ということもあり、それらを踏まえてどのようなデザインが写真を良く魅せれるのかを考えてみました。   その前に、今回表示させるデータの内容を確認しておきたいと思います。今回タイムラインへ表示させる内容は、 ・投稿写真 ・いいね数 ・コメント数 ・ユーザーアイコン ・ユーザー名 ・キャプション 以上のデータを表示させたいと思います。   まず、インスタグラムの公式サイトはどんな表示になっているかを見てみます。公式サイトでは白背景に3列づつ余白を開けて等間隔に並んでいるシンプルなデザインですね。また、写真をクリックするとモーダルウィンドウで写真やその他情報が表示されます。     そして写真にマウスカーソルを重ねるといいねの数とコメントの数が表示されます。     このデザインだとちょっとシンプルすぎて物足りないので少しデザイン要素を加えていきたいと思います。  

1. 写真をより鮮やかに見せるため背景を黒に

背景が白色より黒色の方が写真が鮮やかに見えます。なので背景色を暗くしてみます。周りが暗くなった分写真が目立つようになりましたね。    

2. 写真の並びをスタイリッシュに見せたいので余白を除く

写真と写真の間に余白があるとちょっと間抜けな印象を感じる場合もあります。隙間なくびっしりと詰まっていることでスタイリッシュに見えます。このようにタイル状に並ぶのは最近のトレンドでもあります。  

3. 写真にマウスを重ねることでいいね数とコメント数を表示

これも公式サイトに合わせましたが、今回のデザインに合わせて少し変更しています。件の文字を削除し数字だけ表示されるようにしています。また背景が暗いのでそれに合わせてオーバーレイのレイヤーも暗くしています。    

4. 写真クリックでモーダル拡大表示

同じく写真のクリックで投稿写真の拡大したものをモーダルで表示するようにしています。もちろんレスポンシブ対応で、ミニマムなデザインに。    

5. フォローボタンの設置

Instagramのロゴが入ったフォロー用のボタンも設置します。ボタンの作成方法については下記のサイト記事を参考にさせていただきました。 （参考記事） 美しいInstagramフォローボタンのCSSデザイン例と設置方法     これでだいぶ雰囲気が出てきましたね。当初の見た目と比べてそれなりに変わってきたのではないでしょうか。   いかがでしょうか。比較的カスタマイズが自由にできるのでアイデア次第でいろんなサイトに使えそうですね！今回のサンプルはこちらに用意していますのでまた参考にして頂ければと思います。