Ownedmedia ウェブ制作に役立つコンテンツを発信中!

デザイン 2018.01.15

InstagramAPIで作成したタイムラインをデザインしてみる

Tags: ,,
最終更新日:Update

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

 

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

インスタグラムは写真が正方形というのが一つの特徴です。また今回は出力できる投稿数が合計20件ということもあり、それらを踏まえてどのようなデザインが写真を良く魅せれるのかを考えてみました。

 

その前に、今回表示させるデータの内容を確認しておきたいと思います。今回タイムラインへ表示させる内容は、

・投稿写真
・いいね数
・コメント数
・ユーザーアイコン
・ユーザー名
・キャプション

以上のデータを表示させたいと思います。

 

まず、インスタグラムの公式サイトはどんな表示になっているかを見てみます。公式サイトでは白背景に3列づつ余白を開けて等間隔に並んでいるシンプルなデザインですね。また、写真をクリックするとモーダルウィンドウで写真やその他情報が表示されます。

 

InstagramAPIで作成したタイムラインをデザインしてみる

InstagramAPIで作成したタイムラインをデザインしてみる

 

そして写真にマウスカーソルを重ねるといいねの数とコメントの数が表示されます。

 

InstagramAPIで作成したタイムラインをデザインしてみる

 

このデザインだとちょっとシンプルすぎて物足りないので少しデザイン要素を加えていきたいと思います。

 

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

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

 

InstagramAPIで作成したタイムラインをデザインしてみる

 

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

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

 

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

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

 

InstagramAPIで作成したタイムラインをデザインしてみる

 

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

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

 

InstagramAPIで作成したタイムラインをデザインしてみる

 

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

Instagramのロゴが入ったフォロー用のボタンも設置します。ボタンの作成方法については下記のサイト記事を参考にさせていただきました。

(参考記事)
美しいInstagramフォローボタンのCSSデザイン例と設置方法

 

InstagramAPIで作成したタイムラインをデザインしてみる

 

これでだいぶ雰囲気が出てきましたね。当初の見た目と比べてそれなりに変わってきたのではないでしょうか。

 

いかがでしょうか。比較的カスタマイズが自由にできるのでアイデア次第でいろんなサイトに使えそうですね!今回のサンプルはこちらに用意していますのでまた参考にして頂ければと思います。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?