Archive for the ‘応用編’ Category
Twitterの「ボタン」「ウィジット」「ロゴとアイコン」利用方法
皆さんこんにちわ。
今回はTwitter社の提供する素材、ボタン、ウィジット、ロゴとアイコンの利用方法をご説明しますね。
まずボタンですが、サイト内にツイートボタンを配置しておくとサイトを訪れた人にそのページのアドレスを簡単にツイートしてもらうことができます。
またウィジットを利用すればTwitterのつぶやきをWebサイト内やブログ内に表示させることができます。
さらにTwitterのロゴやアイコン素材も用意されていて、ガイドラインに沿って利用することができるようになっています。
それではそれぞれの利用方法をご説明いたしますね。
まず、以下のサイトにアクセスします。
https://twitter.com/about/resources
下のページが表示されます。
ボタン利用方法
「Twitterボタン」をクリックします。
「ボタンを選択」欄で表示するボタンの種類を選択します。
「ボタンのオプション」欄で「URL」や「ツイート内テキスト」などを指定します。
またボタンの横に数を表示するかどうかや言語の指定をします。
指定が終わったら右の「コードのプリビューを見る」欄で確認後、枠内のHTMLコードをコピーしボタンを配置したいWEBページ内にペーストします。
ウィジット利用方法
「ウィジェット」をクリックします。
ウィジットを表示させたいサイトの種類を選択します。
サイト内に表示させたいウィジットの種類を選択します。
表示させたいtwitterのユーザー名を指定します。
「環境設定」ではスクロールバーを表示するかどうかや表示させるツイートの数を指定します。
「デザイン」ではウィジットの配色を指定します。
「サイズ」では表示するウィジットのサイズを指定します。
「テスト設定」をクリックし右のプレビューが正しく表示されたら、「設定を終了し、コードを生成する」をクリックします。
枠内に表示されたHTMLコードをコピーし、ウイジットを表示したいWEBページ内にペーストします。
ロゴとアイコン利用方法
「ロゴとアイコン」をクリックします。
まずは「twitter登録商標の利用ガイドライン」を参照し使い方を確認してから、使いたいロゴやアイコンをダウンロードします。
デザイナーなら知っておきたい 無料フォントダウンロードサイト
皆さんこんにちわ。
今回は様々なフォントを無料でダウンロードできるサイトについてご紹介します。
すでにデザインに携わっておられる方ならよくご存知かと思いますが、フォントはグラフィックデザインをする上で欠かすことができないものですね。
さらに文字デザインの選び方によって見る人に与える印象や効果は大きく違ってくるものです。
プロほどフォントにこだわりを持つと言われるのも当然のことでしょうか。
以下にＷＥＢ上に公開されている無料で利用できるサイトを幾つかご紹介したいと思います。
各サイトによって利用方法や注意点が異なりますのでそれらを参照の上、ご利用下さい。
dafont.com
種類豊富なたくさんのフォントがあります。
使い方についてはAntaresというサイトで説明されていますのでご覧ください。
neatfonts
ページ左でフォントの種類を選択できます。
1001 FREE FONTS
ページ上部で種類を選択するとそのフォントが下部に表示されます。
Discover Free Fonts
ページ左のカテゴリー欄で種類と登録数が確認できます。
Font Foundry iAi-jp
右欄の「free font」をクリックすると個性的なフォントが表示されます。
Typing Art（タイピングアート）
かわいらしいフォントも揃っています。
FONTSPACE
ページ上部でフォントの種類を指定してすぐにダウンロードできます。
Fonts2u
ページ上部からカテゴリーが選択できます。
外国語フォントも豊富にあります。
FONTSQUIRREL
複数ページのフォントの一覧から選べるようになっています。
WordPress のカテゴリー・タグクラウドのユーザビリティとSEOの効果
皆さんこんにちは。
今回はWordPressのカテゴリーとタグクラウドについてお話します。
すでにWordPressを使っておられる方なら、この辺りの機能は良くご存じかもしれませんね。
カテゴリー
WordPressでは各記事を投稿する際に該当するカテゴリーにチェックを入れることでカテゴリーに分類することができるようになっています。
また「新規カテゴリーを追加」をクリックして新しいカテゴリーを作ることもできます。
このようにカテゴリーをきちんと分けておくとブログを管理する側にとっても情報が整理された状態になるというメリットがありますが、それ以上に見る人にとって分かりやすいサイトになるというメリットもあります。
ブログを訪れる人はカテゴリーの内容から他の関連する情報も拾いやすくなるのでユーザビリティ（使いやすさ）が向上します。
一般的にユーザビリティの高いサイトは訪問者数が増加し、それはサイトの目的の達成につながっていきます。
さらにこのカテゴリー分けのやり方によってはSEOの効果も期待できるのです。
ではここでSEO効果を上げるための幾つかのポイントをご説明しますね。
カテゴリーは配分を考えて
例えばあるカテゴリーに入っている記事の数や内容が極端に多い状態ですとカテゴリーの分け方に問題があるといえます。
検索ロボットはページの上部を重要度の高いものとみなしますので、ページの後ろに行くにしたがってSEOの効果が薄れてしまいます。
そのような時にはさらにカテゴリーを細分化し、適切な配分になるように調整してみてください。
カテゴリー名はキーワードを想定して
カテゴリー名を選ぶ時にはもちろん記事を分類する上で分かりやすい名前にする必要がありますが、さらに多くの人が検索するキーワードも意識する必要があります。
検索されるキーワードが含まれているカテゴリー名はSEOの効果が高くなるからです。
使いたいと思うカテゴリー名をそのまま使ってしまう前に一工夫してみましょう。それに近い言葉で人気のキーワードがあるかもしれません。
人気の高いキーワードはgooキーワードランキングやGoogle AdWordsキーワードツールなどを使って探すことができます。
タグクラウド
これは「タグの雲」という意味で、表示されるタグ文字列が大小さまざまに浮かぶ雲のように見えるのが名前の由来のようです。
タグの頻出度によってタグ文字列の大きさが様々に表示されます。
ブログを訪れる人はこのタグをクリックすることによっても関連する情報を引き出すことができます。
このタグを使ってカテゴリーとは別の視点で記事を分類しておくとユーザビリティが向上します。
またカテゴリーとは違って1つの記事に複数のタグを指定することができます。
各記事を投稿する際にタグ欄のボックス内にタグ名を入力して登録することができます。
このタグという機能は以前はSEOにおいて一定の効果があるとされていました。ただ現在はその効果は分かっておらず、逆に検索ロボットを迷わせるとの説もあります。
それでまずはカテゴリー分けをしっかりし、タグクラウドは補足的に用いるという方法を試してみるのはいかがでしょうか？
見やすいアクセス解析プラグイン Statpress SEOlution
皆さんこんにちは。
今回はWordPressから提供されている、アクセス解析プラグインのStatpress SEOlutionについてご紹介いたします。
WordPressのアクセス解析プラグイン、Statpress Reloadedの派生として開発されたこのStatpress SEOlutionは、非常に機能が充実していることはもちろん、フラッシュ図表によるグラフィックの視覚的な分かりやすさが向上しています。
残念ながらプラグインサイトには 2010年9月に最終リリースとのコメントが。また現状日本語には対応していません。
それでも使う価値のある機能が沢山ありますよ。
今回は特によく使われるOverviewとLast search termsについてご説明します。
Overview（概要）
各種アクセスの推移の記録です。まずはここからホームページにどれだけ人が来たのかを確認してみましょう。
各グラフ項目が色分けされて線グラフとして表示されているので、一目でどのように推移しているかを知ることが出来ます。
各グラフの意味は以下の通りです。
Visitors（訪問者数）
ホームページに何人の人が来たのかの純粋な人数です。
Pageviews（ページビュー）
見られたページ数です。
Spiders（スパイダー/検索ロボット）
検索ロボットの「スパイダー」が巡回に回ってきた回数です。
Feeds
フィードの購読者数です。
Last month
先月の訪問者数のトータルです。
This month
今月の現段階の訪問者数トータルです。
Target This month
今月の目標です。
Yesterday
昨日の訪問者数です。
Today
今日の訪問者数です。
Last search terms
このホームページにきた人がいつどんなキーワードを使って検索したかの一覧表です。
【まとめ】有料のデザイン・イラスト素材サイト
皆さんこんにちは。
今日は有料のデザイン・イラスト素材サイトについて紹介します。
前回無料のデザイン・イラスト素材サイトを紹介しましたが、今日は「有料版」を紹介します。
有料ということもあり種類の多さはもちろん、色々な場面で使用可能となります。
無料と同じくサイトにより利用規約はありますが、無料よりも使える幅は確実に広がると思います。
オススメ有料デザイン・イラスト素材サイト
| 名前 | 特徴 |
|---|---|
| YOURSTOCK | 写真の金額がサイズにより異なり、定額プランも有。写真ダウンロードの際には要無料会員登録。 |
| アフロ | 膨大な数の写真がある。また読売新聞の写真も取り扱っている。要無料会員登録。 |
| 素材事典 | CD-ROMにより素材を購入し利用する。また、素材辞典シリーズのうち高解像度データの要望が高いタイトルから厳選しより大きいサイズが利用できる素材辞典[R(アール)]シリーズというものがある。 |
| フォトライブラリー | 日本最大級の投稿型ストックフォト（写真販売）サイト。個人でも写真を公開・販売が出来る（ただし審査がある） |
| amanaimages | 広告に使えるイメージ写真やＴＶ、ニュース写真が800万点以上素材として用意されている。3Dモデリング素材もある。（要3DCGソフト）要会員登録。 |
| paylessimages | 料金の支払いが使い放題の「定額制サービス」か1点ずつ買える「プリペイド方式」とわかれている。要会員登録。 |
| 背景専門店みにくる | ゲームやコミックの背景素材を著作権フリーで販売している。日常屋外や、学校といった様々な背景がある。 |
| デジタルトーンスタジオ | 漫画・イラスト・デザインなどに使用可能なデジタルトーンを販売している。他にもゲームや動画に使えるロイヤリティーフリー音楽素材の販売も行っている。要無料会員登録。 |
| イラスト素材.com | 全て500円で購入可能。7個以上お買い上げで金額が10%オフされる。また、データ形式を選んで購入することができる。（AI、EPS、JPEG、PNG） |
| For DESIGN | シルエット素材やグラフィックス、フォトと多種多彩の素材が販売されている。フォーマットもAI、EPS、JPEG、PNGと用意されている。 |
| Photooo | 1点380円から購入できる。写真やイラストのほかにベクターでも購入が可能。 |
| iStockphoto | 購入する際はサイト特有のクレジットを購入しないと画像を買うことができない。写真やイラストのほかにオーディオやビデオも用意されている。要無料会員登録。 |
| デジケット・コム | 背景から立ち絵までゲーム作成に必要な素材が多彩に販売されている。会員登録をしなくても購入可能。 |
| ビジンソザイ | 女性ストックフォト限定の有料素材サイト。美容シーンに特化している。要無料会員登録。 |
| PIXTA | 素材を買うことはもちろん売ることも可能。要無料会員登録。 クリエイター数は89,000人以上。素材点数は194万点以上掲載されている。 |
いかがでしょうか？
一枚づつ購入できるサイトもあればまとめて購入できるサイトもありますので皆様の用途に適した素材をダウンロードしてくださいね＾＾
【まとめ】無料のデザイン・イラスト素材サイト
皆さんこんにちは。
今日は無料のデザイン・イラスト素材サイトについて紹介します。
サイトを作る際に「可愛いアイコンやおしゃれな写真が欲しい・・でも自分では作成することができないし・・」とお悩みになることはありませんか？
そんな悩みを解決してくれるのが今回紹介するデザイン・イラストのフリー素材です。
しかしフリーだからといって好き勝手に使って良い訳ではありません。
必ず素材をお借りする前にチェックしなければならないのが「利用規約」です。
サイトによってイラストの加工の不可・直リンク禁止・商用利用について・・・などといった注意事項が異なります。
この利用規約は年月が経つと変化するサイトもありますので、必ず「利用規約」をチェックした後に利用して下さいね。
オススメ無料デザイン・イラスト素材サイト
| 名前 | 特徴 |
|---|---|
| 写真素材 足成 | 和の写真素材サイト。様々なアマチュアカメラマンが撮影した写真が素材として使用可能。 |
| デザイン素材.com | 素材を自由に加工でき、商用利用も可能。ただし素材として再配布する行為は禁止になっている。 |
| 0円のWEB素材屋 さん |
プロのウェブデザイナーにより作られている素材サイト。加工や商用への利用も可能。ホームページやブログに素材に最適。 |
| Image Life | 個人・商用問わず無料で使用可能。直リンクは禁止なので要ダウンロード。JavaScript素材もある。 |
| 無料アイコン素材 | サイトやチラシ作成の際に便利な素材を扱っているサイト。白黒でシンプルなアイコンがダウンロードできる。 |
| Cool Liberty | イラスト素材だけでなくWEBテンプレートやFLASH素材もダウンロードすることが可能。 |
| 1キロバイトの素材屋さん | メジャーな無料イラスト素材サイト。タイトル通り、1KB以下のフリー素材を扱っている。 |
| emStudio | 配布されている素材の元になったIllustrator、Photoshopデータも無料配布している。 |
| BB-WAVE | ビジネスシーンで使用できる素材から地図のイラストといった一風変わった素材をダウンロードできる。ダウンロードするためには要無料会員登録が必要。 |
| 東京デート | 商用、個人用、ホームページ用、各メディア、すべてに利用可能な東京専門の写真素材サイト。7000点以上掲載されている。 |
| Free.Stocker | 主にイタリアの写真を扱っているサイト。日めくり★イタリアというブログパーツも配布している。 |
| PHOTO STOCKER | 写真を扱っているフリー素材サイト。写真のジャンルごとにカテゴリーされている。商用の利用も可能。 |
| modelpiece | フリーの人物写真素材サイト。モデルごとに写真がわけられており、商用利用のサイトや広告に使用することも可能。 |
| CG.フォト | プロのグラフィックデザイナーがCG加工したデザイン画像作品が使用可能。カテゴリごとにわけられている。 |
| PAKUTASO | 高品質な素材サイト。「出来る限り高解像度の形式」の提供を心がけており、同系色だけを表示させる検索も可能。 |
いかがでしょうか？
フリーとは思えないほど素敵な素材ばかりですよね＾＾
次回は「有料のデザイン・イラスト素材サイト」を紹介いたします。
【まとめ】WEB制作に欠かせない？Firefox拡張機能
その前にまずFirefoxのインストール方法を説明しますね。
Firefoxのインストール方法
無料ダウンロードのリンクをクリック。
まず製品情報ページへ行き、無料ダウンロードのリンクをクリックします。
ダウンロードページ http://mozilla.jp/firefox/
ファイルのダウンロード
「ファイルのダウンロード」のダイアログが表示されますので「実行」を選択しダウンロードを開始します。
ダウンロード完了後に自動的にインストールが開始されます。
なお「セキュリティの警告」ダイアログが表示された場合は、発行元が「Mozilla Corporation」であることを確認し、「実行する」を選択してください。
セットアップを開始します。
「Mozilla Firefox のセットアップ」の画面が表示されますので「次へ」をクリックします。
「セットアップの種類」が表示されますので「標準インストール」を選択し「次へ」をクリックします。
その後、インストールが始まります。「Mozilla Firefox のセットアップを完了します」画面が表示されたら「完了」をクリックします。
設定とデータのインポート
初めて起動する際に「設定移行ウィザード」が開き、「設定とデータのインポート」が表示されます。
インポートする対象のブラウザを選択し「次へ」をクリックします。データをインポートしない場合は「設定をインポートしない」を選択して下さい。
その後「ホームページの選択」が表示されます。「Firefox のスタートページ」 か、これまでと同じホームページ（Yahoo!・gooなど）設定を使用するかを選択し「次へ」をクリックします。
データが正常にインポートされると「インポート完了」が表示されます。この後 Firefox のウィンドウが自動的に開きます。
以上でインストールは完了です。
Firefox拡張機能
では早速本題に入ります。Firefoxには「拡張機能」という便利なものが有ります。
これはアドオンと言われ、Firefoxに便利な機能を追加できるといったものです。
そのアドオンの中でも今回はWEB制作に欠かせないものをまとめてみました！
WEB制作に欠かせないFirefox拡張機能まとめ
| 名前 | 特徴 |
|---|---|
| ColorZilla | Webページの様々な場所の色を簡単にチェックする事ができる。独特な色を見つけた場合、一瞬で調べることができるので時間がかからない。 |
| Firebug | CSSやHTML、JavaScriptの編集、表示といったことがリアルタイムに行えるツール。 Webアプリケーションの開発やWebデザインの調整に欠かせないツール。 |
| IE View | 見ているページ上で右クリックをすると Internet Explorer で開いてくれる。 |
| MeasureIt | Webページ上でサイズの計測が可能。 |
| Opera View | 見ているページ上で右クリックをするとOpera で開いてくれる。 |
| Pearl Crescent Page Saver | 簡単にスクリーンショットを画像として保存ができるアドオン。ページ全体や、表示されている一部分のみをキャプチャーすることが可能。PNGかJPG形式か選択できる。 |
| Screen Grab | こちらもスクリーンショットを画像として保存可能なアドオン。こちらはPNG形式のみの保存となる。 |
| Web Developer | ページを表示させながらのCSSの編集や、テーブルの枠やDIVタグの枠をページ上に色線で表示といったWEB制作には欠かせないアドオン。 |
Internet Explorerを使用されている方が一般的には多いと思うのですが、上記のような便利なアドオンを無料で追加できるので、Firefoxをまだ使ったことのない方は是非ダウンロードして使ってみてくださいね＾＾
【まとめ】デザイナーにとって必要なサイト
皆さんこんにちは。今日はデザインをする上で欠かせないサイトを紹介します。
プロのWEBデザイナーもデザイナーの卵でもサイトを作成するにあたり悩むことってありますよね？
そんな貴方の悩みが少しでも解消されればと思い、調べてまいりました！
デザイナーが知っておかないと損なツールまとめ
| 名前 | 用途 | 特徴 |
|---|---|---|
| Online HTML Editor | HTML | リアルタイムでプレビューができるHTMLエディタ。 Dreamweaverやホームページビルダーいらずでプレビューできます。 |
| Realtime HTML Editor | HTML | こちらもリアルタイムで表示が確認できるHTMLエディタ。 HTMLがブラウザ上でどのように表示されるかをすぐに確認できます。 |
| Typetester | フォント検索 | オンラインで、セレクトボックスで確認しながらフォントの設定ができるサイト。 フォントを設定し、文字を入力するだけでフォントの文字体が一瞬で分かる。 |
| Firebug | コーディング | コーダーにはもはや必須ツールとなっているサイト。リアルタイムにCSS、HTMLの表示を確認しながらコーディング作業が可能。また、JavaScriptのデバッグと分析もできる。 |
| Urbanfonts | フォント探し | ジャンルがそれぞれ分けられており、8000以上のフォントがダウンロードできるサイト。 |
| What the Font? | フォント探し | 「このフォントは何だろう？」や「このフォントのライセンスが知りたいけど・・・」といった困ったことに対応してくれるのが、このフォント調べサイト。画像ファイルをアップロードすることで、それに近いフォントを検索してくれる。 |
| IconFinder | アイコン探し | 全部で69123個と多くのアイコンが登録されているサイト。多種多様なアイコンからお目当てのアイコンを探す事が可能。 |
| Find Icons | アイコン探し | 現在、30万個以上ものアイコンから検索できるアイコンサイト。日本語での検索に対応している。検索結果の量・質ともに実用に役立つレベル。 |
| Colourlovers | カラーツール | 最近のカラーのパターンやトレンドといったウェブデザインから使われているカラー構成をピックアップして紹介するカラーサイト。 |
| kuler | カラーツール | 様々な色の組み合わせ、配色パターンをWebブラウザー上で作成して、保存・公開もできる、一風変わったサービス。 |
| DeviantART | インスピ レーション |
10年以上運営しているデザインのコミュニティサイト。様々な方の作品があるのでデザインする際の参考になる。 |
| Ember | インスピ レーション |
WEBデザインからグラフィックデザイン等について、インスピレーションを得たり共有することができるサイト。 |
| Best Web Gallery | ウェブ デザイン ギャラリー |
海外のWEBサイトを多く掲載しているWebギャラリーサイト。 |
| Cacoo | ワイヤー フレーム作成 |
ワイヤーフレームやネットワーク図が簡単に作成できるサイト。要無料アカウント登録。 |
| Designers Toolbox | ワイヤー フレーム作成 |
バナー作成をする際に非常に便利なサイト。色んな形の素材をダウンロード可能。 |
| FavIcon Generator | 便利なジェネレーター | ファビコンがウェブ上で簡単につくれるサイト。右側にあるカラーピッカーで色を選び、ドット状の升目になっているキャンパスに絵を描いた後にダウンロードして画像を保存するだけでOK。 |
| pForm | 便利なジェネレーター | スタイリッシュなフォーム作成を簡単にできるHTMLフォームジェネレータ。 |
| Browsershots | ブラウザ | ほぼブラウザ全てを網羅した、ブラウザでの表示確認サイト。ただし全種類のブラウザ画像を生成するようにしているするとかなり時間がかかる。 |
| Spoon Browser Sandbox | ブラウザ | 上記に同じくブラウザ表示確認サイト。 |
| Dropboxr | ファイル管理 | WEB上に自分専用のハードディスクを持つことのできるオンラインストレージサービス。 |
| Google docs | ファイル管理 | リアルタイムでシェアできるオンラインドキュメント。カレンダーやプレゼンの資料も管理・共有できる。企業で利用しているところも多い。 |
| Quickly Code | チートシート | 数多くのチートシートがアーカイブされているサイト。チートシートとはカンニングペーパーという意味を持つ。 |
| DevCheatSheet | チートシート | 上記と同じくチートシートサイト。 |
| W3counter | 解析サイト | 無料のウェブサイト解析サイト。サイトを利用するユーザーはどのような傾向か？なども調べられるのでマーケティングに利用するのに最適。 |
| PHOTOX | オンライン イメージ エディタ |
オンライン上で画像の編集が出来るサイト。使い方がPhotoshopに似ている。 |
| Are My Sites Up? | その他 | サイトがダウンがした時などに知らせてくれるサイト。 |
調べてみると見事に英語圏のサイトがばかりになってしまいましたが、デザイナーの方ならきっと使いこなせる・・はずです！
この中で特に面白いな~と感じたのがIconFinderです。
英語で検索すると膨大な数のアイコンが・・・見ているだけでも楽しめます＾＾
上記のサイトを駆使し、素敵なWEBデザインを！
HP執事は全てのデザイナーを応援しています。
