0%

Designデザインワークショップ

Posted:2018.01.15

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

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

 

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

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

 

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

 

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

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

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

 

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

 

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

 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】