宮崎のホームページ制作会社Tedinc | ホームページ

menu 0982-60-1084

TEDINC OFFICIAL BLOG

こんにちわ、Tedincの林田です。

今回はInstagramの写真を取得しWEBサイトに反映させる上で手こずった項目について書いていきます。

Instagram反映までの流れ

1、Instagramのdeveloperのページに進みアプリケーションを登録
2、ユーザーIDとアクセストークを取得する。
3、Instafeed.jsとjQuery simplyScrollを使ってサイトに反映

今回の記事は1、2の項目にてこずった為、1と2について詳しく書いています。


1、Instagramのdeveloperのページに進みアプリケーションを登録


1,Instagramのdeveloperのページに進み、「Register Your Application」をクリック

deve



2,項目全てを入力して「Sign Up」をクリック

your website:あなたが使うWebサイト名
Phone number:電話番号の登録
What do you want to build with the API?:使用するAPIの目的
deve2



3、developerのページに戻るので、右上のメニューバーから「Manage Clients」へ進む

deve3



4、Manage Clientsのページで「Register a New Client」をクリック

deve4



5、Register new Client ID のページで全ての項目を入力

Application Name:アプリケーションの名前
Description:アプリケーションの説明
Company Name:会社名
Website URL:使用するサイトURL
Valid redirect URIs:Website URLと同じでOK
Privacy Policy URL: プライバシーポリシーの記載があるURL
Contact email:メールアドレス
deve5



6、Securityタブをクリックし、「Disable Implicit OAuth」のチェックを外す。

deve7-1


ここにチェックが付いていると、アクセストークンを発行するときに、エラーで返されます。

{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}


7、Manage Clientsのページに戻りデベロッパーの登録は完了。

表示されているCLIENT IDとREDIRECT URIを【ユーザーIDとアクセストークを取得する。】で使用するのでコピーします。

deve6


2、ユーザーIDとアクセストークンを取得する。


Instafeed.jsでユーザーIDとアクセストークが必要となります。

https://instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【REDIRECT URI】&response_type=token

1、上記URLの【CLIENT ID】と【REDIRECT URI】変更しブラウザでURLにアクセス

Manage Clientsのページに記載されている自分の情報に書き換え、URLをクリックすると下記のページが表示されるので「Authorize」をクリック
deve8



2、反映させるサイトが表示されるのでURLの中の文字をコピー

Instagramを反映させるサイトが表示されますが、URLを見ると
deve9
になっています。
この【access_token=】以下の文字を使用します。自分の文字を例にすると
ユーザーID(userId):48875156
アクセストークン(accessToken):48875156.64b8f1c.48d8baef107b438d8b4d98a8c51cb003
になります。


3、Instafeed.jsとjQuery simplyScrollを使ってサイトに反映

【Instafeed.js】



Instafeed.js


http://instafeedjs.com/
Instagramで最新のfeedを取得してくれるjQueryプラグイン
オプションが細かく設定できるすぐれたプラグインです。

【jQuery simplyScroll】



simplyScroll


横方向に自動スクロールしてくれるjQueryプラグイン
http://logicbox.net/jquery/simplyscroll/

この項目については詳しく載っている記事を掲載いたします。
参考記事:
jQueryでInstagramのフィードを取得して自動スクロールさせる





反映したもの


    まとめ

    今回は【jQuery simplyScroll】も使いたかったので、上のようなレイアウトにしましたがInstagramを使ったフォトギャラリーも【Instafeed.js】を使いCSSでレイアウトを行えば様々な見せ方を行えます。 よかったら参考にしてみてください。


    参考記事一覧

    Instagram のユーザー情報を取得+写真をサイトに表示+それを自動スクロールする jQuery
    InstagramのAPIで写真を取得する【準備編】
    jQueryでInstagramのフィードを取得して自動スクロールさせる


     

    今日はロゴ作成の時、参考にしているロゴデザインギャラリーサイトの紹介です。

    ロゴはWebサイト、ホームページ制作のキモとなる部分です。

    インスピレーションが刺激するロゴは勉強になります。参考にして下さい。

     


    logogallery(とりあえずロゴを沢山見たい時にオススメ)


     

    logogallery

     

    URL:http://www.logogallery.net/

    コメント:

    Logoが全て正方形で型取られ非常に見やすいサイトです。

    サムネイルをクリックすれば、デザイナーとUrlの情報が載っています。

    沢山のLogoを一気に見たい時にはオススメです。

     


    Logo pond(自分好みのロゴを探す時にオススメ)


     

    logopond

     

    URL:http://logopond.com/

    コメント:

    こちらも有名なロゴギャラリーサイトです。

    Logo pondの特徴はサムネイルをクリックすると使われている色や、似た色の配色のものが下に一覧で表示されます。

    イメージ頭にぼんやりあり、自分がイメージしているロゴデザインをさがしたい時はオススメです。

     


    LOGOGALA(色は決まっているけどデザインに悩んだ時にオススメ)


     

    logogala

     

    URL:http://www.logogala.com/

    コメント:

    LOGOGALAの特徴は右のサイドバーに14種類のパレットがあり、色を抽出して一覧を表示してくれます。

    色は決まっていて、デザインに悩んでいるときなどはオススメ。

     


    Logo of the day(ロゴと合わせてWebサイトも見たい時にオススメ)


     

    LogoOfTheDay

     

    URL:http://logooftheday.com/

    コメント:

    気にいったロゴがどんなサイトかを見たい時には便利なフォトギャラリー。

    サムネイルをクリックすると、そのままLogoをしようしているサイトに移行します。

     


    LOGOMOOSE(ロゴデザイナー探しや、購入にオススメ)


     

    logomoose

     

    URL:http://www.logomoose.com/

    コメント:

    参考にしたいデザイナーや、購入したい場合に有効なLOGOMOOOSEは様々なユーザーが登録して

    自分がデザインしたものなど投稿しているサイトです。

     

     


    logo stock(ロゴコンセプトの勉強にオススメ)


     

    LOGOSTOCK

     

    URL:http://logostock.jp/

    コメント:

    logo stockは日本語でロゴコンセプトを説明してくれ、わかりやすいサイトです。

    運営されている人の努力が伺えます。

    デザイナーがLogoにどのような思いを注入して作ったかを知るのに勉強なります。

     


    まとめ


     

    ロゴは企業やWebサイト、ホームページを表す象徴です。

    沢山いいものをインプットして、いざ自分でデザインする(アウトプット)時に約立ちます。

    ぜひ参考にしてみて下さい。

     

    デザインのテンプレートは様々な物がありますが、今回は以前紹介したBootstrapのテンプレートを集めたサイトを紹介します。

    今回は無料のテンプレートを中心に有料でも安価なテンプレートを紹介しています。

    ダウンロードも簡単です。

    Bootstarpとは?

    Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための

    「CSSフレームワーク」

    です。

    過去記事:Bootstrapをしっかり理解したい為の記事

     


    startbootstrap


     

     

    startbootstrap

     

    URLhttp://startbootstrap.com/

    コメント

    ダウンロードまでが簡単で、登録などなく、そのままダウンロードして使えます。シンプルな英語でタイトルがつけられているので、用途に合わせたサイトを簡単選べます。

    Preview & Downloadから気に入ったテンプレートページに飛んでダウンロードをクリックすればOK。

     

     


    shapebootstrap


     

    shapebootstrap

     

    URL:https://shapebootstrap.net/

    コメント

    こちらは有料な物もありますが、無料もあります。

    無料テンプレートURL:https://shapebootstrap.net/free-templates

    有料の物でも$15~なのでめちゃくちゃお安いです。無料のテンプレートは登録など何もなしで簡単にダウンロードできます。

    サイトのクオリティが高くスライダー、パララックスもそのまま無料で使える優れ物もあります。

     


    wrapbootstrap(有料 $4〜)


     

    wrapbootstrap

     

    URLhttps://wrapbootstrap.com/

    コメント

    こちらは有料になりますが、$4〜で一番高くても$30くらいです。(ちなみに$30はかなり作りこまれているサイトで、日本円で約3500円くらいです。)

    少しお金をを出しもいいからという人にはオススメです。

     


    まとめ


     

    いかがでしたか? 以前の記事でもBootstrapをオススメした理由を書きましたが、

    Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための「CSSフレームワーク」

    です。

    Webサイトに一番必要なものは、コンテンツや機能性です。つまり一番時間をかけなければいけない項目でもあります。

    Bootstrapを使えば、Webサイト構築(デザイン・レスポンシブなど)の時間が短縮され、より中身(コンテンツ)にこだわったサイト制作できます。

    そして、様々なサイトで提供されているテンプレートを使えば簡単にカッコよく機能性の高いサイト制作ができるであろうと思い紹介しました。

    よければ参考にしてください。

    こんにちは、Tedincの林田です。

    今回は2015年の春夏のトレンドカラーを紹介します。

    ホームページやWebサイトの色で悩む事は多々あるかと思いますが、私は今年の流行の色などを検索して参考にしています。

    ファッション業界は色を大事にしている業界ですし配色の組み合わせの勉強にもなります。

     

    2015年トップ10はパステルカラー(中間色)。春夏の定番「海色」が上位

    記事抜粋

    レアトリス・エイズマン=パントン・カラー・インスティチュート エグゼクティブ・ディレクターは、「今シーズンは、いつも以上にウケる理由がある」と話す。それは、デジタルデバイスがもたらした“24時間働けますか?”的な日常生活からのエスケープ願望。「携帯電話にメール、そしてテキストメッセージ。人々は、こんな生活から一瞬でも解放されるため、開放的な色を好みそうだ」と分析する。

    参照

    【コラム】2015年春夏“海色”がウケる理由

     

     

    2015 trend color palette

     

    まとめ

    今回選択されている色は春夏用のファッションショーなどで使われたWOMAN用の配色です。

    パステルカラーはフラットデザインとの相性も良いですね。

    MENS用の配色もありますが、私個人の意見としては、色に関してのセンスはやはり女性の方が際立っいると感じているためWOMAN用の配色をパレットにしてみました。

    (理由:女性は毎日化粧をする事で、常日頃から色と直面している為)

    ホームページやWEBサイトの配色に悩んだ場合は参考にしてみてください。

    こんにちわ。Tedincの林田です。年末からサイトのリニューアルとマーケティングの勉強に時間を費やし今年からはよりホームページ運営や経営に役立てる情報を発信していきます。

    今回はキャッチコピーについて記事を書きます。

    Webマーケティングの勉強をして感じた事はホームページやWebサイトにもっとも重要な物はしっかりとしたコンテンツです。しっかりとしたコンテンツとは、ユーザーが欲しがっている情報です。 サイト訪問者は、キーワードでサイトを見つけた時は、言葉を読んで自分が欲しい情報かを判断します。決してデザインで全てを決めるような事はありません。

    そしてサイト離脱するのか?もしくはそのコンテンツを読んでくれるかどうかは、キャッチコピーの出来によってほとんどが決まります。

    キャッチコピーの魅力は何もホームページやWebサイトに限らず、商品、飲食店のメニュー、様々な事に還元できます。

     

    素晴らしいキャッチコピーはユーザーの購買意欲を引き出す効果がある。

    キャッチコピーの効果は、私自身が飲食店経営を行って強く感じました。

    「何か新しいメニューを追加しよう」と、なった時以前やって、あまり注文を貰えたなかったメニューを再度出してみようという話になりました。 商品はとん平焼きと言われる関西地方の定番です。以前は短冊に

    「新メニュー とん平焼き」

    と書いて出していたところを

    「関西の人気メニューが上陸!!! とん平焼き シャキシャキのネギとフワフワの卵に包んだ豚肉が絶品の関西の人気メニューです!!」

    としたところ、商品は月単位で以前の20倍の注文を頂き、お店の定番のメニューとなりました。

    キャッチコピーがもたらす効果を感じる事ができる瞬間でした。

     

    キャチコピー作成で参考になった3つの記事

    反応率を4倍にする原稿の書き方(テンプレート付き)

    キャッチコピーの書き方

    キャッチコピー作りで煮詰まった時に見るべき、プロの「テンプレ&テクニック集」まとめ

    書き方、考え方、どのような基準で書くなどがわかりやすく書いてありました。

    掲載した記事はWebライティング中心ですが、商品、企業理念、チラシ宣伝様々な分野でも役に立つ記事です。

    参考にしてみてください。

     

    大企業の企業理念やキャッチコピーはやはり魅力的です。

    有名企業の企業理念や商品のキャッチコピーはやはり良く考えられています。人の心をくすぐるような物、遊び心、力強い物など様々です。掲載する企業の商品を想像すると、なるほどと思わされます。

     

    旭化成

    「昨日まで世界になかったものを。」

     

    ユニクロ

    「ちょっと欲しいが、たくさんある」

     

    吉野家

    「はやい、うまい、やすい」

     

    JR東海

    「そうだ、京都に行こう」

     

    ニトリ

    「お!ねだん以上。にとり」

     

    ファミリーマート

    「あなたとコンビに」

     

    参考記事

    センスを感じる企業のキャッチコピー

     

    総括

    キャッチコピーは商品の売上などに貢大きく献し、企業の大小問わず無料で取り組める項目です。 よかったら参考にしてみてください。

    CONTACT US

    お気軽にお問い合わせ下さい

    お問い合わせはコチラ