ホームページ制作やブログ制作に役に立つ!facebookとtwitterのボタンの設置方法!ーfacebook編ー
ホームページ制作やブログ制作に役に立つfacebookとtwitterのボタンの設置方法!ーfacebook編ー
こんにちは
パクちゃんです。
今日は最近サイトやブログによくあるfacebookとtwitterのボタン設置方法について書きたいと思います。
スマホが普及し、SNSの利用者も増えてきました。
そしてSNSの宣伝効果はすごいと思います。
私はあるサイトを運営している会社でアルバイトをしていますが、
そこでイベントページを企画し、そこにSNSボタンを設置することになりました。
いいねやツイートのボタンを押したことはありますが、
設置の仕方がよく分からなくてネットから検索し、とても苦労しました。
facebookとtwitterのボータンを一緒に入れるとずれてしまい、
とても大変だったので失敗がないような設置方法を共有したいと思います!
今回はfacebook編です。
>Like Button – Facebook開発者
↑上記のリンクをクリックすると開発者向けのサイトに飛び、
「いいね」ボタンを作ることができます。
①URL to Like：自分のサイトのURLを入れます。（詳しくは⑨番で）
②Layout Style：送信ボタンをつけるかどうかを選択します。
③ボタンのスタイル
1.standard：下のように「いいね」ボタンと「送信」ボタン、何人が「いいね」をクリックしているのかが分かります。そして「いいね」をクリックして、友達に知らせましょうという文言が出ます。
2.button_count：何人の人が「いいね」ボタンを押しているのか簡易的に表示します。
3.box_count：ボタンが縦並びで表示されます。button_countと同じように、何人の人が「いいね」ボタンを押しているのか簡易的に表示されます。
⑥ボタンのフォント
→いろんなフォントがありますが、日本語は何を選んでも変わりません。
⑦ボタンの色
1.light 2.dark
→上記のようにボタンの背景色を変えることができます。
⑧ボタンの文言
1.like 2.recommend
→ボタンの中の文言を「いいね」にするか「おすすめ」にするか決めることができます。
⑨コードを作成してサイトに設置する
→設定が終わったら⑨のGet Codeをクリックして上記のコード「１」と「２」をサイトやブログに全部入れてください。
もし、①番で自分のサイトのを入れると「⑨-２」のコードに下記線部分が変わります。
レスポンシブWebデザインを制作するときの考え方と実装について 前編
今回はとある活動で「レスポンシブWebデザイン」をすることになりました。
貴重な経験だったのと、理解をもっと深めたいなと思ったので
今までに学んだことについてまとめて記事にさせていただきたいと思います!
◆レスポンシブWebデザインとは
レスポンシブWebデザインとは、PC・タブレット・スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。
ブラウザーのスクリーンサイズを基準にCSSのMedia Query(メディアクエリー)でレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。
つまり、PC、タブレット、スマートフォンなどのデバイスをwebサイト表示の判断基準にするのではなく、ブラウザの横幅サイズをwebサイト表示の判断基準にして、ページのレイアウトデザインを柔軟に調整できるディスプレイの最適化を図っています。
さらに新しいOSやデバイスが登場しても単一のHTMLなのであまり修正する必要もない！ということですね。
作ってみて、失敗しての繰り返しで理解できたことは多くありました。
知識・考え方は理解していましたが、いざ制作！となると上手くいかないことがあり、
そこで気づいた制作時の注意点として、いくつか上げてみたいと思います。
◆「モバイルファースト」という考え方
私がこの言葉を聞いたのは、某会社のセミナーでした。
これは「モバイルを起点に企画やデザインを考える」というコンセプトです。
（混乱しがちですが、ただスマートフォンサイトを作ってからPCサイトを作ること、というサイト制作の順番ではありません。ですがスマートフォンサイトから設計していくとのことです。）
だからwebサイトのコンテンツもスマートフォンを中心に考え設計します。
◆スマートフォンの画面設計時に考える要素として
1.PCに比べてスクリーンが小さいのでユーザーの目的が達成させられるように
スマートフォンサイトでは画面解像度がPCと比較して小さく、iPhoneなら320px×480px(iPhone4以降のRetinaディスプレイ対応なら640px×960px)、Androidは機種によって違いますが480px×800pxが多いのではないでしょうか。そうなるとユーザーが求めている情報にたどり着くことが遅くなりえる不要な情報はなくす方が望ましいかと思います。なのでユーザーが目的を達成させるための導線は最小限に設計する必要があります。
またwebサイトが表示された最初の画面(ファーストビュー)に入れる情報も上記の点を意識すべきでしょう！
2.会社や家とは違い、時間と場所に様々な利用シーンがある
ユーザーがモバイルを使用する利用シーンは様々ありますよね。電車の移動時や家でテレビを見ながらなど...設定しているターゲットユーザーの行動にあったアプローチが求められると思います。
3.通信速度などに関するパフォーマンスの違い
スマートフォンはインターネットの通信速度がPCと違い遅いのも特徴的です。
みなさんも使っていて早くなれば良いのに…とおもっているのでは？
参考：「スマートフォンに関するアンケート http://www.marsh-research.co.jp/examine/ex2409.html」
今後スマートフォンで「非常に重視」していく点は、「通信速度！」というユーザーの意見もあるほどです。
なので必要以上に画像を多く使用するのをさけて、CSS3で表現できるところは使用し、CSSファイルは圧縮サービスを利用することでファイル容量を小さくすることが出来ます！
参考：「CSS圧縮webサービス css compressor(http://www.webcyou.com/?p=2047)」という記事も参考にしてみて下さいね。
4.使用するイメージ画像について
スマートフォンのデザインを考えてPCへ移行するときに、キービジュアルなどの拡大する画像とそのままの大きさの画像が出てくると思います。
またRetinaディスプレイや高解像度ディスプレイの場合も想定すると一つひとつの画像をそのディスプレイの解像度に合わせて作るというやり方よりは、使用する画像をSVG形式のベクター画像にして拡大縮小しても画像が粗くなることがないやり方をお勧めします。
他にも考慮する点がありますが、以上の注意点などを踏まえてました。
ですが、実際にやってみると「ブラウザの横幅を狭くしたら...」や「PCの時のこうだったから...」などPCサイトのデザインを優先に考えていたときもありましたね(汗)。
後編はレスポンシブWebデザインのコーディング実装について書いていきます！
少しでもみなさんのお役に立てていただけたら幸いです！
2013年の年賀状を作るのに役立つ！可愛い巳年画像など無料のフリー素材を提供しているリンク集
こんにちは。
中央特快です！2012年も残すところ半月程度ですね。
そろそろ、来年の年賀状を制作…なんて方は多いのでないでしょうか？
今回は、そんな年賀状制作に役立つ、無料で使える画像、フリー素材を提供してるサイトやリンクをご紹介します(^O^)
年賀状クイックサーチ｜郵便年賀.jp
日本郵政グループが提供している、年賀状フリー素材サイトです。
巳年用の干支画像やら、2013というロゴやら、様々条件を変えて、検索できるので、とても便利です。
無料・有料年賀状イラスト・素材が1000点以上！@nifty年賀状2013年
niftyが提供している、年賀状フリー素材サイトです。
既に、デザインが全てまとまっていて後は印刷するのみ、というような素材も数多く用意されているので、時間がない方には便利かも！？
無料で使える年賀状素材年賀状特集2013 ... - BIGLOBEシーズン
BIGLOBEが提供している、年賀状のフリー素材サイトです。
こちらは無料で使えるフリー素材に加え、有料で使えるデザイナーズ素材もあります。ちょっと他の人と差を付けたいという人は、有料の素材を使ってみるのもいいかもしれません。
無料年賀状素材・テンプレートのダウンロードサイト「年賀状AC」
Freebie ACさんが提供している、年賀状のフリー素材サイトです。
会員登録をすれば、年賀状素材に加え、その他のフリー素材も使い放題です！！
よくイラストが必要になるという方にはオススメです。
年賀状無料イラスト2013年・巳年(へび)フリー素材(LITTLE HOUSE)
LITTLE HOUSEさんが提供されている、年賀状のフリー素材サイトです。
可愛い感じの素材が多数提供されています。女性の方にオススメです。
近年、数多くのフリー素材が提供されています。
これを機に年賀状を自分で制作してみませんか(^O^)？
中央特快
Webアプリケーション作りに役立つ、オススメの本！！
こんばんは。中央特快です(^O^)
私は今現在、卒業制作で、Webアプリケーションを制作しています。
WebアプリケーションはiPhoneアプリやAndroidアプリと違い、HTML5やCSSなどを使って制作できるで、Webデザインの知識がある程度分かり、アプリを作ってみたい！！と考えてる方にオススメです！！
今日は私が、Webアプリを制作する上で役に立ったオススメの本を紹介したいと思います(^^ゞ
よくわかるPHPの教科書
Webアプリを作成する上で、必要になったのがPHPの知識。この本はPHP初心者の私でも、読みやすく分かりやすかったです。
jQuery Mobile スマートフォンサイト デザイン入門
モバイル用のWebアプリを制作する上で利用したのがjQuery Mobile。jQuery Mobileを利用すると簡単にレスポンシブなWebアプリを作ることができるので、様々な画面サイズにWebアプリを対応させるのにとても役立ちました。
そんなjQuery Mobileについて学ぶのにこの本はとても分かりやすかったです。
私はTwitter APIを利用したアプリケーションを制作しています。Twitter APIについて書かれてる、様々な本やWebサイトを見ましたが、この本が一番分かりやすかったので、オススメです。
安全なWebアプリケーションの作り方
そして今現在、読んでいるのがこの本です。
実際にWebアプリケーションを運営していると、様々な脆弱性などが見つかったり、ユーザーさんから指摘されることもあります。そんな時、この本をユーザーさんと知り合いに紹介していただきました。
この本を読んで、より脆弱性のないアプリを作っていきたいと思います。
以上が、私が卒業制作としてWebアプリを作る上で、お世話になっている本です。良かったら、是非読んでみて下さいね。
中央特快
学生のお祭り、学園祭！今年は『コスプレ喫茶』を!
こんにちは。
初めてご挨拶します！
パクちゃんです!
今回は学校の学園祭のことについて話たいと思います!
今年の学園祭は11月3日～11月4日でした!
私が所属している学科には5つのプロジェクトチームがありまして、
私はその中イベントチームで活動しています!
そのイベントチームでは今年『コスプレ喫茶』を企画しました！
普通は学生が勉強している座学教室を学園祭の前日に
1年生と2年生が協力し、カフェに変えました！
(ハロウィーンの直後だったので飾り物はハロウィーン風~)
そして店員はイベントチームはもちろん、webデザイン学科の学生は誰でも参加OK！
学園祭に来るお客さんは卒業生を始め、入学検討者、一般の人などなど
さまざまな方々がいらっしゃいました。
『コスプレ喫茶』のメニューは「チュロス」と「紅茶」、「緑茶」その3つ！
チュロスは二日とも売り切れ！そして紅茶と緑茶も大人気でした!
ホールの人、カウンターの人はコスプレを、
調理の人は清潔のため帽子、エプロンを着用しました。
お客さんの中にもコスプレが好きで来た人も多くて、
コスプレをして訪問したお客さんもいました!
私は個人的にコスプレなど全然興味がなかったし
一度もやったことがないですが、
今回の学園祭をきっかけにコスプレの面白さを感じました!
二日間の学園祭、すごく楽しかったです!
