カテゴリー : WEB

WEBデザイン参考サイト集まとめ

WEB制作する上で、デザインは重要です。
サイトの機能面と見た目など、さまざまな要素を考慮してデザインします。
そこで、「ほかのサイトってどんな感じにしてるんだろう?」と、検索することも多いですよね。

そこで、WEBデザイン参考のリンク集サイトをまとめてみました。


デザインリンクデータベース
カラー、コンテンツ内容、テイスト、その他でカテゴリ分けされている。
全体的に数が紹介サイト数が多い。

WEBデザイン見本帳
印象、色、ジャンルでカテゴリ分けされている。全体的に見やすい。

FLOWERS
イラストレーター、フォトグラファー、デザイナー、グッドデザイン(現在中身なし)でカテゴリ分けされている。(更新されてない。けど、きれいなサイトがある。)

WEB de DB
業種別、ベースカラーでカテゴリ分けされている。

クリエイティブなWebデザインリンク集 -[ウェブアートノックARTNOC]
業種、カラー、レイアウトでカテゴリ分けされている。

いけてるサイト WEBデザイン
業種別でカテゴリ分けされている。

テンプレートモンスター
WEBデザインのテンプレート集。海外のデザインが多いので、国内サイトとはまた違った刺激に!(WEBデザインのリンク集とは違うけど。)

Webマーケッター&Webディレクターのマンガ

Web担当者ForumとASCII.jpで公開されているWebマーケッター&Webディレクターをマンガのご紹介です。
これからWeb制作者として働こうと思っている方や、仕事でWebの知識が必要になった!という方はいろいろと勉強になるかと思います。

Web担当者Forumでは、マンガ「Webマーケッター瞳」(全8話+特別編)
ASCII.jpでは、マンガ「Webディレクター 江口明日香が行く」(全9話+特別編)
が公開されています。
ちなみに、特別編では、「Webマーケッター瞳」と「Webディレクター 江口明日香が行く」がコラボ(?)してます。

マンガなので「そんなにうまくいかんわ!!」っていう突っ込みどころはスルーして、これから勉強するなら、とりあえず読んでみると楽しく学べる教材になるかと思います。
無料ですし、何か本を買う前に、読んでおくとハズレ本を買ってしまうことが避けられるかも。

「Web Resizer」写真の簡単な編集に!

webresizer

WEBブラウザ上で簡単に写真編集ができるWeb Resizer

写真のリサイズやトリミング、回転などは簡単にできます。
「Image quakity」の数値を下げれば、写真の容量も調整できたり、「Contrast(コントラスト)」の調整だったり、写真をモノクロにしたり。
また、一番下の「Border」をいじると、写真に好きな色の枠をつけたりなんてこともできます。


写真の編集方法
画面上部の「参照」をクリックし編集したいPC内の写真を選択し「upload image」をクリックするとアップロードされる。

webresizer 写真編集画面

こちらの部分の数値を変更し、「apply changes」をクリックすると、写真に変更が適用される。
編集が終了したら、「download this image」をクリックすると、編集した画像をダウンロードできる。


写真編集ソフトを使うまでもないときなど、使えそうですね。

Web Resizer

Webサイトのアイトラッキング調査

アイトラッキング調査とは

アイトラッキング調査とは、Webサイトを見るユーザーの視点が「どこを」「どの経路で」「どのくらいの時間」見ているかを調査すること。
人の眼球や角膜反射を赤外線でとらえることで、視線の動きを追跡する科学的手法で心理学や認知科学などの研究分野においても広く採用されている。

Webサイトをアイトラッキング調査することにより、どのページ・エリアがどのような経路でどのくらい注目されていたかがわかるため、ページやエリアごとの関心度を定量的に明確化させることができる。

どのような調査なのだろうか?
例えば、以下のような感じ。

これにより、
注目してほしいエリアがしっかり注目されているか?
視点の邪魔になっているものはないか?
きちんと誘導できているか?
明確にすることができるため、インターフェイス、レイアウト、デザインの改善にも役立つ。

動画サイトで「アイトラッキング調査」と検索すると、ほかにもいろいろでてくる。

キーワード出現頻度とキーワード解析ツール

SEO対策をする上で重要なキーワードの出現頻度(含有率)。

フリーツールで調べられる。
キーワード出現頻度解析ツール
キーワード解析(複数ページを確認できる。)
SEOチェキ
などがある。
各サイトで計算方法がかわるため、結果も多少変わってくるのでいろいろと調べてみると良い。

サイトのテーマを絞って、ページに合ったコンテンツを多く取りそろえることで、検索順位を上昇することができる。
テーマを絞れば、自然にキーワード出現頻度(含有率)は3~5%くらいに収斂されていく。
キーワードを意識しすぎて、出現頻度を上げてしまうとスパム扱いされることもあるようなので注意!

検索エンジンを意識しすぎても、検索エンジンの仕様が変わっていってしまうので、王道でやっていくのが一番だと思う。(更新頻度を高めるとか。)
ユーザーにとって有益なサイトは検索エンジンからみても有益とされるサイトなハズ!!
(このブログが有益かどうかを考えると・・・だけどね)

ベクトル画像編集ソフトウェア「Inkscape」使えるフリーソフト

Inkscape(インクスケープ)

Inkscape(インクスケープ)スクリーンショット

Inkscape(インクスケープ)はオープンソースで開発されているベクトル画像編集ソフトウェア(ドローソフト)。
かなり使えるフリーソフト!かなり高機能です。
アドビ社のイラストレーターは高くて買えない!って人もまずInkscapeで練習するのも良いのではないでしょうか。
対応OSはWindows、MacOS、Linux。

ダウンロードは以下から
Inkscape公式サイト

Inkscape(インクスケープ)の基礎講座してるサイトもありました。
インクスケープの使い方・基礎講座

このサイト運営している方の作品もあります。
フリーソフトなのにすごい!
チュートリアルもありますので参考に!
Google Chrome Logo グーグル・クローム
Inkscape Drawing : インクスケープでQuick Time ロゴを描く

ホームページちょこっと更新ツールHL-chocotto-editor(ちょこっとエディタ)

サイトを制作したら、更新もお願いされることが多いかと思います。
しかし、文字だけのちょっとした更新などで、金銭的に請求するほどじゃなくおまけ作業としてやってあげちゃうことが多いのです。
そんなときに、結構重宝するツールが「ホームページちょこっと更新ツールHL-chocotto-editor(ちょこっとエディタ)」。

このツールを使うと、HTML文書の任意のエリアをブラウザから更新できるようにしてくれます。
更新するエリアが決まっている場合は、ちょこっとエディタを設置してクライアントにおまかせ!という選択肢もできますよね。
フリーのCGIスクリプトなので、たいていのサーバーで利用できますし、金銭的負担もなくできるので助かりますね。

数年前からこのツールありますが、私は小規模サイトの制作が多いので、未だにちょくちょくお世話になってます。

以下からダウンロードできます。
設置方法も詳しく書かれていますので、初心者でも問題なく利用できるハズです。
HL-chocotto-editor(ちょこっとエディタ)

クリエイティブコモンズ3.0 解説まとめ

クリエイティブ・コモンズ 3.0 まとめ

クリエイティブコモンズが良く分からないので、調べてみた。
以下6項目があり、すべて原作者クレジット表記が必要。

  • Creative Commons 3.0 Attribution
  • 原著作者クレジット表記が必要。商用利用OK。改変OK。
    ただ「Creative Commons」や「Creative Commons Licenses 3.0」と表記されているものは、Creative Commons 3.0 Attributionとして扱っても問題ない。

  • Attribution-NoDerivs
  • 原著作者クレジット表記が必要。商用利用OK。改変NG。

  • Attribution-NonCommercial-NoDerivs
  • 原著作者クレジット表記が必要。商用利用NG。改変NG。

  • Attribution-NonCommercial
  • 原著作者クレジット表記が必要。商用利用NG。改変OK。

  • Attribution-NonCommercial-ShareAlike
  • 原著作者クレジット表記が必要。商用利用NG。改変OK。
    ただし、改変し頒布する創作物はライセンス体系を同じにする必要がある。
    この場合は「Creative Commons 3.0 Attribution-NonCommercial-ShareAlike」としなければならない。

  • Attribution-ShareAlike
  • 原著作者クレジット表記が必要。商用利用OK。改変OK。
    ただし、改変し頒布する創作物はライセンス体系を同じにする必要がある。
    この場合は「Creative Commons 3.0 Attribution-ShareAlike」としなければならない。

未だに何がどうだったかわからなくなるので、メモでした。

クリエイティブ・コモンズ・ライセンスとは

SEO『sitemap.xmlの作り方』

sitemap.xmlの自動生成ツール(サイト)をご紹介。
sitemap.xmlをサーバーにおいてGoogleWebmasterToolで通知しておけば、検索エンジンロボットがあなたのサイト構成を把握しやすくなります。
sitemap.xmlの自動生成してくれるサイトは検索すると結構でてきます。
が、自動生成するなら、自分のサイトにリンク貼らなくてはいけない。というところもあったりします。

以下、ご紹介しているサイトはリンクなどの条件がないサイトです。

無料登録.com
sitemap.xml Editor
XML sitemap generator(英語)
だいたいどこで作っても、sitemap.xmlの中身は変わりません。

sitemap.xmlを作成できたら、保存してサーバーにアップしましょう。
次に、googleウェブマスターツールやyahooサイトエクスプローラーなどにサイトを登録し、sitemap.xmlを登録→送信しておけば、YahooやGoogleなどの検索エンジンロボットが、あなたのサイトを見つけてくれるハズです。(何もしないよりは、早く見つけてくれるでしょう!)