LINE友だち追加ボタンをホームページに設置しよう

おはようございます。中小企業診断士の山口達也です。

今日はLINE@の友だち追加ボタンを
ホームページに埋め込む方法をお伝えします。

line.jpg
linenewfriends99.jpg

LINE@でクーポンやセール情報を配信している
中小企業も見かけるようになりました。

友だちの獲得に工夫を凝らしています。

Webサイトにボタンがあると、
QRコードの読み込みや、ID検索と違って、
ボタンを押すだけで友だちになれるので、
スマートフォンでwebサイトを見ている
お客様にはかなり便利です。

この友だち追加機能は、
LINEの個人アカウントではできず、
LINE@アカウント向けのサービスです。

設置は簡単です。
LINEのソーシャルプラグイン、設置方法へアクセスします。
https://media.line.me/ja/how_to_install

ガイドラインを読んでから設置してください。

友だち追加ボタンの欄の
LINEIDを入力して、コードをコピーして
自分のホームページ貼り付ければよいです。

私の場合のサンプルは以下の通りです。
以下のような感じでホームページに
書けるといいですね。

LINE@友だち募集中!
友だち追加方法は3つ!

【友だち追加ボタンから】
スマートフォンの方は
下のボタンをタップすると友だち追加できます。


【QRコードから】
LINEアプリの「友だち追加」から「QRコード」を選び
下のQRコードを読み取ると友だち追加できます。



【ID検索から】
LINEアプリの「友だち追加」から「検索」を選んで、
@jwg3035o」で検索すると友だち追加できます。

QRコードは、LINE@の管理画面(LINE@ MANAGER)に
ログインして、対象のアカウントを選んで、
「アカウント設定」→「基本設定」にある
QRコードを使っています。

画像のサイズが大きかったので、
width="30%" height="30%"
をタグに入れてQRコードのサイズを小さく表示しています。
posted by ブランド経営コンサルタント at 06:24Comment(0)Webデザイン

InstagramをInstaWidgetでホームページに貼り付ける

おはようございます。中小企業診断士の山口達也です。

今日はInstagramをホームページや
ブログに埋め込む方法をお伝えします。

Instagramの公式ウィジェットを使う方法は
英語のページで複雑です。

今回は簡単な方法として
InstaWidget(インスタウィジェット)をご紹介します。

埋め込んだサンプルブログは以下のURLです。
http://site-sample-weblog.seesaa.net/article/456858397.html
下の写真のようなイメージで埋め込めます。

instagram埋め込み3.jpg

好きなユーザーのインスタグラムや
好きなハッシュタグの写真を
ウィジェットとして貼り付けられます。

使い方は本当に簡単で、
InstaWidgetにアクセスして
https://instawidget.net

instagram埋め込み1.jpg

「無料インスタグラムブログパーツ作成」を
クリックして、あとは埋め込みたい
ユーザー名などを入力すると
右下にコードができますので、それをコピーして
ホームページなどに貼り付ければ完成です。

instagram埋め込み2.jpg

ブログパーツと呼んでいますが、
ホームページでも可能です。

横幅のピクセル数や
写真の枚数などの設定は変えられます。

新入荷の商品や店内装飾の写真を
インスタグラムにアップして、
それがホームページに自動で掲載されれば、
自社の世界観を気軽に演出することができます。

無料のサービス(ソフトウェア)ですが、
ウィジェットのリンク先がInstagramではなく
InstaWidgetになります。

この広告を外すには有料となります。

ただ、InstaWidgetの画面をもう一度クリックすると、
Instagramに飛んでいくので
無料でも十分使えると思います。

3週にわたってwebサイトに、
Twitter、Facebook、Instagramを
貼り付ける技をご紹介しました。

ただ、3つすべて貼り付けると、
webページが表示されるまでに時間がかかるので
利用者にストレスになるでしょう。

表示に時間がかかるのは、
SEOの観点でもあまり良くないので、
自社にあったサービスだけを貼る方が
よいかもしれません。
posted by ブランド経営コンサルタント at 07:33Comment(0)Webデザイン

Facebookページをホームページに埋め込んでいいね!を促す

おはようございます。中小企業診断士の山口達也です。
ピョンチャンオリンピックの選手たちの活躍に励まされています。

今日はホームページやブログに
Facebookページを埋め込む方法をお伝えします。

Facebookのページプラグインへアクセスします。
https://developers.facebook.com/docs/plugins/page-plugin

facebook埋め込み1.jpg

「FacebookページのURL」に
表示させたいFacebookページのURLを入力します。

facebook埋め込み2.jpg

例えば、ブランドファインのFacebookページを
埋め込みたいときは以下のURLを入れます。
https://ja-jp.facebook.com/brandfine/

入力するとプレビューが表示されます。
(Facebookにログインしているときのみのようです)

「タブ」の欄は、
「timeline,events,messages」と入力すれば、
タイムラインの他に
イベントやメッセージも表示させることもできます。
カンマ区切りで入れてください。

幅や高さは、空欄だとデフォルトの
幅340ピクセルと高さ500ピクセルとなります。
設定を変えたい場合は数値を入力しましょう。

「plugin containerの幅に合わせる」は
ウィジェットがコンテナ内に収めるためのもので、
レイアウト崩れを防ぐために
チェックを入れておくとよいでしょう。

その他はお好みで設定しましょう。

設定が終わったら、
「コードを取得」をクリックして、
「IFrame」を選択してコードをコピーして
自分のホームページなどに貼り付ければ完成です。

facebook埋め込み3.jpg

サンプルのブログに貼った例がこちらです。
http://site-sample-weblog.seesaa.net/article/456852770.html
(横幅が広いウィジェットは
スマートフォンでは見にくいかもしれません)

ファンにFacebookページを認知してもらい、
Facebookページへの「いいね!」を促すには
良い仕掛けになります。
posted by ブランド経営コンサルタント at 07:38Comment(0)Webデザイン

Twitterをホームページに埋め込んで動きを出そう

おはようございます。中小企業診断士の山口達也です。

今日はホームページやブログに
twitterを埋め込む方法をお伝えします。

twitterwidget6.jpg

ホームページの更新は重要と思いながらも
毎日の業務に追われて、
更新が滞っている中小企業も多いと思います。

更新が手軽なTwitterのウィジェットを貼り付けると、
企業に動きがあることがわかり、
ホームページが活動的に見えるのでお勧めします。

ウィジェットはwebサイト上などで動くプログラムで
Twitterを更新すると、貼り付けられたウィジェットの
情報も更新されていきます。
タイムラグはあまりありません。

その貼り付け方は、まずパソコンでtwitterにログインします。
右上のプロフィール写真が
「プロフィールと設定」のボタンになっていますので、
それをクリックして、「設定とプライバシー」をクリックします。

twitterwidget1.jpg

左にメニューが並んでいますが、
下のほうにある「ウィジェット」を選び、
ウィジェットの「新規作成」「プロフィール」を選びます。

twitterwidget2.jpg

「What would you like to embed?」
の下の窓に埋め込みたいURLを入れます。

twitterwidget3.jpg

私のアカウントなら
https://twitter.com/brandfine
を入力します。

左の「Embedded Timeline」を選び、
下の「Copy Code」を押して、コードをコピーして、
貼り付けたいwebサイトのソースに貼ればOKです。

twitterwidget4.jpg

貼り付けるウィジェットの大きさなどの
設定を変えたい場合は「Copy Code」の上の
「set customization options」から
サイズを変えることができます。

twitterwidget5.jpg

サンプルのブログに貼った例がこちらです。
http://site-sample-weblog.seesaa.net/article/456728668.html
(横幅が広いウィジェットは
スマートフォンでは見にくいかもしれません)

私も長年webサイトに貼り付けています。
パソコン版のみ(スマートフォン表示では見られません)。
http://www.brandfine.net

トップページの新着情報のコーナーとして使う企業もあります。
お手軽ですのでぜひ試してみてください。
posted by ブランド経営コンサルタント at 07:37Comment(0)Webデザイン

ブログ新デザインに!

おはようございます。中小企業診断士の山口達也です。
横浜の桜は綺麗に咲いています。

すでにお気づきの方も多いと思いますが、
当ブログのデザインを新しくしています。

下の画像は刷新前のデザインです。
旧ブログデザイン.jpg

デザイン変更の理由は2つあります。

・当ブログが11年目に突入して気分を変えるため。

・ブログの運営元のseesaaが
新デザインシステムへの移行を進めているため。

新しいデザインシステムはHTML5対応で、
スマートフォンからの読者も意識したデザインです。

SEOも有利なソースコードになりました。

また、小さい文字を読ませるより、
見出しや最初の画像でクリックを促す傾向が強まっていて、
その傾向を意識したデザインになっています。

スマートフォンの読者が増えていますからね。

ただ、パソコンを中心に
既定設定では読みにくく感じるところもあり、
読みやすくしようとデザイン改良をしています。

8年以上、変えていなかったので、
webデザイン作業に手間取っています。

時間を見つけながら少しずつ調製します。

携帯電話用ホームページは簡単に作ろう

おはようございます。中小企業診断士の山口達也です。
今日は携帯電話向けのwebサイトについてです。

今年はスマートフォンの普及が進みました。
スマートフォンを略した「スマホ」は、2011年の
ユーキャン新語・流行語大賞のトップテンに入りました。

スマートフォンの向けのアプリ開発を検討している
中小企業もあるでしょう。

ただ、通常の携帯電話からのweb訪問も忘れてはいけません。

(株)MM総研の予測によると、
現時点でのスマートフォンの契約件数は2000万件と推測され、
携帯電話の契約件数の約8割は通常の携帯電話です。

MM総研の2011年7月7日のニュースリリース
スマートフォン市場規模の推移・予測(11年7月) 
http://www.m2ri.jp/newsreleases/main.php?id=010120110707500

スマートフォンの利用者と一般の携帯電話の利用者では、
web閲覧の利用度合いや、リテラシーに差があるとはいえ、
通常の携帯電話からのアクセスをまったく考慮に入れないのは
もったいないでしょう。

パソコン閲覧を前提に作られているwebサイトは、通信会社や
携帯端末の仕様の関係で、通常の携帯電話では見にくいです。

携帯電話用のwebサイトを作ることが求められます。

特に店舗のある企業や、若年層を対象としたビジネスでは、
携帯電話向けのwebサイトが求められるでしょう。

しかし、スマートフォンの普及が進んでいることを考えると、
通常の携帯電話向けのサイトを持つ重要性は低下する可能性が
高いです。

そこで、まだ携帯電話向けのサイトを作っていない中小企業には、
簡単に無料で携帯電話向けのサイトを作ることを勧めています。

例えば以下のサービスを利用すれば、
無料で携帯電話向けwebサイトを簡単に構築できます。

FC2ケータイホームページ
http://k.fc2.com/

Yahoo!ロコプレイス
http://locoplace.yahoo.co.jp/index.html

外出先で道に迷っている人には、事務所の住所と地図が
あるだけでも助かるものです。

電話番号を掲載し、パソコン向けのサイトのURLリンクを
設置しておけば、携帯電話向けのサイトには企業の詳細情報を
必ずしも多く盛り込まなくてもよいでしょう。

モバイルで販売を考えているのでなければ、
携帯電話向けサイトの内容は簡単に済ませてよいのです。

お客様を不快にさせない、逃がさないためのページとして、
スマホアプリに力を入れる前にサッと作っておきましょう。

私も以前に作成したモバイル向けwebサイトがありますので、
ご紹介します。
http://k2.fc2.com/cgi-bin/hp.cgi/brandfine/

SEOや他のサイトを上位から締め出すことにも、
少しは効果があるでしょう。

Webデザイナー検定に合格

おはようございます。中小企業診断士の山口達也です。

CG-ARTS協会のWebデザイナー検定2級
(CGクリエイター検定Webデザイン部門)に合格しました。

Webデザイナー検定はWebデザイナーや学生などが受験しています。
7月に受験した結果が届きました。

webデザイナー検定2級.jpg

Webデザイナー検定2級の出題範囲は次のようなものです。

Webサイト制作のプロセス、コンセプトメイキング、
Webサイトの種類と技術、情報の収集と分類の手法、
整理された情報を組織化するための手法、
レイアウト、タイポグラフィ、グラフィックス、
カラーコーディネート、ユーザインタフェース、
ナビゲーションデザインの手法、
動きの技法と表現、Web制作に用いられる言語、
バックエンドで活用する技術、Webサイトのテスト、Web解析、
Webサイトの運用、Webサイトのリニューアル、知的財産権

合格率は36.3%だったそうです。

約半年勉強した成果として、うれしいです。

Webデザインの基本はマスターできて、
「ホームページ作ってよ」というレベルなら、なんとかなります。

どんどん新しい技術が出てくる分野なので、今後も勉強します!

企業サイトが完成

おはようございます。中小企業診断士の山口達也です。
今日は私のコーポレートサイトの紹介です。

法人ではないので、
厳密にはコーポレートサイトと言えないかもしれませんが、
私の中小企業診断士事務所の企業Webサイトです。

私の事務所の屋号は「ブランドファイン(Brandfine)」としました。

ブランドファイン
http://www.brandfine.net

専門的な話をすると、Movable Typeベースの
TypePadで作成しています。

Webサイトの構成を考えて、MTタグを勉強して、
といった作業が必要で、他の仕事もしながらということもあって、
制作まで約2ヶ月かかりました。

まだWebサイト内の情報が不足しており、
情報を加えていくつもりです。

今回の制作にも、Adobe Illustrator(アドビイラストレーター)、
PhotoShop(フォトショップ)に、ez-HTML(イージーエイチティーエムエル)を使いました。

ソフトの役割を簡単に説明すると、登場順にグラフィックデザインソフト、写真の編集加工ソフト、HTMLを記述するための編集ソフト、です。

このブログは一個人として無料で情報発信するサイトですが、
ブランドファインのサイトでは企業として情報発信します。

両方とも続けていきますので、今後ともよろしくお願いします。

PS.今週金曜からGOOD DESIGN EXPO(グッドデザインエキスポ)が
いよいよ開幕です!私も行きます。

ブログをリデザイン2

おはようございます。中小企業診断士の山口達也です。
ブログのリデザインの続編です。

デザインをリニューアルしたのは昨日お伝えしましたが、
その後、Internet Explorer6(IE6)で見たところ、
デザインがくずれていることが判明しました。

そのため、リンク部分の文字を小さく修整しました。
これでIE6でも見れるようになったのではと思います。

実は、インターネットを見るときに使うWebブラウザと
呼ばれるソフトウェアによって、
Webサイトの見え方は異なります。

このWebブラウザには、以下のようなものがあります。
Internet Explorer
Firefox
Safari
Opera
Netscape

私はIE7を使っていたので、
最初IE6で見れないことに気付かなかったのですが、

IE7をアンインストールして、それからIE6をインストールして
という手順で確認・修整しました。

Webデザインでは、どのOS(Windows、Macなどの
オペレーティングシステム)、どのWebブラウザで見ても、
きれいに読めるWebサイトのデザインが求められます。

これはかなり難しいことです。

実際、全部のWebブラウザのすべてのバージョンに
合わせてデザインするのは不可能に近いです。

しかし、Webログの解析によって、
このブログを一番見ているWebブラウザがIE6だったので、
昨日あわてて修整しました。

よく見られているブラウザには最低合わせる必要があります。

このあたりの問題は、
デザインするときに、ちょっとわずらわしいですね。
専門的な知識が必要となります。

もしまだ見にくいブラウザがあれば、教えてください。
古いブラウザでなければ、できるだけ対応します。





ブログをリデザイン

おはようございます。中小企業診断士の山口達也です。

このブログのデザインを一新しました。
だいぶ印象が変わったと思います。

読みやすい、シンプル、美しい

を目指しました。

いかがでしょうか?ご感想をお寄せください。


デザインに使ったソフトウェアを紹介します。


デザインの見直しは、CSS(カスケーティングスタイルシート)
という技術を使っています。

CSSは、webサイトをつくる「HTML」というコンピュータ言語
から進化した「XHTML」と組み合わせて使います。

といってもゼロから作ったのではなく、
このブログサービスを提供しているSeesaaの
CSSをもとにオリジナルでデザインしました。


CSSを書くのに使ったのが、
ez-HTML」というフリーのソフトウェアです。

無料とは思えないほど、とても高性能で便利です。感謝。


タイトルのロゴは、
Adobe Illustrator(アドビイラストレーター)
というグラフィックデザインソフトを使って作りました。

こちらは有料。グラフィックデザイナーは必ずと言って
よいほど持っているソフトです。