Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報

• 2011/03/30
• 

Yamadaです。
かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。

というわけで改めて春ですし、これからホームページ（Webサイト）を作成してWeb屋さんになる方へ送るお勧めサイト集です。

忘れないで欲しい事

Web制作には、様々なスキルが求められます。
しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れてしまう人が多いです。

それは、Web制作とは「誰かが、誰かの為に、情報を見せる為の一つの手段」であると言うことです。
例えば、JavaScriptの情報を求めている人の為に情報をインプットし、公開する為にJavaScriptの猛勉強をしているということならとてもマッチしています。
しかし、えんぴつを販売する為に、JavaScriptを猛勉強し、これでもかとJavaScriptをもりこんで制作したり、一般的な食品を売るサイトで、IEの表示をくずしてでも、最新のCSS、HTMLを使う必要があるかという事をしっかりと吟味しなければなりません。

これらはとても大切な事で、どれだけ制作者のスキルが高くなろうとも、コンテンツを無視した制作は意味がありません。
今回紹介するリンク集は、制作のための手段をまとめたものになります。それらを手にしたうえで、発想、そしてアイデアが大事だと言う事を忘れないで欲しいと思います。

Web制作をこれから始める人の為のリンク集

• 各種Webブラウザ、携帯ブラウザ用シミュレータ
• 情報の入手、検索スキル
• ショートカットースキル
• コーディング入門
• 素材の利用に対する著作権やライセンスについて
• 国内で商用でも使える素材サイト
• 海外での写真素材を利用
• 無料フォント
• 無料アイコン

各種Webブラウザ、携帯ブラウザ用シュミレータ

いくつか基礎知識として、ブラウザの問題。
現在、一つのサイトを閲覧する為のソフトが沢山合りまして、Web屋になる為にはこの問題を避けて通ることが出来ません。GoogleChromeでは正しく表示されているが、IEでは崩れているとか、IE9では表示されているが、IE7ではダメといった問題があるのです。

主要ブラウザ

IE6、IE7、IE8、IE9。
Windows買ったら最初に入ってるブラウザのインターネットエクスプローラー。通称IE。
CSS3、HTML5、それぞれ適当に実装されているため、それぞれの試験が必須。特にIE6に対応させるかどうかで揉める。もはや生きた亡霊です。日本国内では、IEユーザーの商品購入率が、他のブラウザユーザーよりも高いため、IE対応は必須と言われています。ちなみに、どれか入れると、他は入れれなくなりますので以下のようなテスターを皆さん使います。

複数バージョンのIEでデザインを確認できる「SuperPreview」
実際にIE9はWindows7でしか動きませんので、実機で確認する為にはWindows7も必要です。

IETester
すごい不安定ですがこの業界ではかなり重宝されています。

Firefox
豊富なアドオンと、アドオン自体の利便性が人気のブラウザ。firefox3になってから重くなり、一気にシェアをGoogleChromeに奪われはしたものの、そのアドオンの利便性と機能から人気は衰えていません。4になってから軽くなった。

Google Chrome
高速ブラウザと名をうち登場したGoogle製のブラウザ。firefoxのアドオンと同じく、機能を拡張していく事が可能なExtensionが充実してきたため、firefoxから乗り換えるユーザーも増えた。私のメインブラウザ。

Web ブラウザ Opera
絶対的なユーザー数は少ないが、コアなユーザーからは絶大な支持を受けているブラウザ。こちらもアドオンによる機能拡張が魅力なのと、なんだかんだいって高速。

アップル - Safari
私がブログを書くときに利用しているブラウザ。アドオンもありますが、豊富とまではいかない。アドオン未実装状態で超高速なのでお気に入り。お気に入りや、履歴を見るときのビジュアルが便利すぎて使ってます。

携帯ブラウザ

docomo/SoftBank/au対応の携帯(モバイル)シミュレータ - P1エミュレータ
有償、無償の二つありますが、無償はおためし版です。
本格的にモバイルサイトを検討している場合に。



Ext JSをUIに使って携帯サイトのシミュレータを作ってみた
PHP4、5での動作確認済みの、サーバーサイドアプリケーション。



サイトビューワ - goo モバイル
gooが提供するブラウザベースのモバイルビューア。


User Agent Switcher
firefoxのアドオン。アクセスしている端末情報（ユーザーエージェント）を擬似的に変更し、確認が出来る。


各キャリア提供物
iモードHTMLシミュレータII｜NTTドコモ
docomoのやつ。1もある。それぞれ機種別。

Openwave� SDK 6.2K
Auのやつですが、現在公開配布してません。リンクはるの悩みましたが、一応。

ソフトバンクのWebビューア
驚くべき事に2007年産。

スマートフォン用ビューア

iPhoneのシミュレータ「iBBDemo」（Windows用）
Windows用ですが、iPhoneでのビューアに使えるシミュレータ。




Android SDK インストール(Android 2.1SDK) - Android入門
こちらはAndroid端末用のシミュレータ。

目次にもどる

情報の入手、検索スキル

この業界で生き抜くためには、とにかくあらゆる情報を見る前に、検索するスキルを最大限まで磨き上げることが重要です。

• 己自身で
• 必要なときに
• 必要な情報を探し出す
たったこれだけの事ですが、これらが出来て初めてスタート地点にたどり着いたと言っても過言ではありません。
まずはこの3つをいかにして見につけるかを考えてみましょう。



Google検索5大活用テクニック


Facebookにやられてるとか言われていますが、Google検索は今でも健在です。
スパムな情報や余計な情報をいかにはぶき、そして目的の知識にたどり着けるのか。Googleには、様々な活用方法がありますが、その中で5つ、避けて通るべきではないい5つのテクニックをご紹介します。


１）ワイルドカード→*

ワイルドカードは特に曖昧な言葉を検索するときに使います。
東京*学校と検索すれば、「東京〜〜〜学校」と仕分けされた情報にたどり着けます。
「あれ、ここまで出掛かってるんだけどなんだっけー」と言うときは遠慮なく使い倒しましょう。


２）完全一致検索

「"」を使い、検索キーワードを完全一致させて検索します。
例えば「jQueryの情報」と「"jQueryの情報"」では、検索結果が変わります。どういう時に使うかと言うと、今まで見た記事のタイトルの一部を覚えていたときに、かなり有効です。かならずその言葉が入るなら、それを完全一致検索で検索するべきなのです。


３）フィルタリング検索

検索結果の一覧の中で、ある特定のキーワードを省きたい場合に「-（マイナス）」をつけます。
例えば「手書き風」と検索するとフォントやアイコン、素材などが出ます。そこで「-フォント」を付け足すと、フォントに関する情報が消えるのです。


４）or検索

似たような情報をダブルで検索したい時に利用します。
例えば、「手書き風　アイコン　PSD」と検索すると、アイコンとPSDがAND検索されてしまうため、手書き風のPSDのアイコンを検索します。しかし「手書き風　アイコン|PSD」にすると、検索結果が大幅に変わります。これは、「手書き風」の「アイコン」に分類されるものも検索するし、アイコンとはキーワードになくてもPSDとついてるものも検索してくれるようになるのです。


５）「英和・電卓・とは」検索

「英和　ポートフォリオ」で、和英辞書サイトがヒットして来ます。電卓は、検索窓に「956+987/32」と計算式を入れると、答えを出してくれます。「とは」は意味がわからない言葉を検索する時に、「○○とは」と入れると、その言葉の意味が検索結果として表示されます。




ブラウザ拡張で更にわかりやすくする



Google検索結果に「はてなブックマーク数」を表示するものがあります。これらを利用する事で、どの情報が人気なのかが、ある程度予測できます。また、ちゃんとそのコメントを見ると、実は間違った情報だったりとか、使えない情報等が確認できるのも強みです。これは上で紹介した、アドオンやExtensionで追加します。

• Hatena Bookmark :: Add-ons for Firefox
• はてなブックマーク GoogleChrome 拡張

はてなブックマーク
かなり偏った情報が手に入ります。ブックマークとは名ばかりで、コメントをつけてもブックマークになるため、ただ炎上してるだけのどうでもいい記事とかもあがってきますが風物詩です。特にコメントを見てみると、よい情報なのか、それとも実は内容が間違っているのかとかを確認することが出来るのが利点です。


目次にもどる



ショートカットースキル



とにかく早い段階でショートカットキーを覚えましょう。私の経験上、ショートカットキーを完全に使いこなせるようになると生産性はかなり向上します。何をするにしてもショートカットキーはどんな時にも役に立ちます。

ちなみに上の画像は私のキーボードですが、自分にマッチしたキーボード買うだけでもだいぶ向上します。


Ｃｔｒｌ＋Ｃ
選択範囲のコピー。
フォトショップ等、画像編集時にも良く使う。何も選択して無いところでこれをしてもコピーされないところが優れもの。

Ｃｔｒｌ＋Ｖ
貼り付け。ペースト。
これもびっくりするくらい良く使う。

Ｃｔｒｌ＋Ｘ
頻度はコピーと変わらないかも。
いわゆる切り取りです。選択範囲を切り取ります。

Ｃｔｒｌ＋Ｚ
一個前の動作に戻る。
文章などを書いていて、間違って消してしまった！とか、そんな時にはこれで復活。おすすめです。

Ｃｔｒｌ＋Ｙ
Ｚで戻ったけど、やっぱり戻りたくなかったというときにこちら。一個先の動作に進むです。

Ｃｔｒｌ＋Ｆ
現在開いているウィンドウ内の文字を検索します。

私の使っている最小限ショートカットキーベスト１５から
Windowsで最低限覚えておいて欲しいショートカットキー一覧です。


BAMBOO＋Chromeショートカット7つで高速ブラウジング
Chromeユーザーなら覚えておいて損のないショートカットキー一覧です。

いずれ耳にする事になるのが、マウスジェスチャです。
マウス操作で色々出来るようになりますので興味があれば試してみてください。

• Smooth Gestures - Google Chrome 拡張機能ギャラリー
• Firefox アドオン - FireGestures | Mozilla Japan

目次にもどる




コーディング入門


どこまでを説明すればよいのかが一番悩んだところです。
ただ、制作に最低限必須なのがHTMLです。次にCSSです。
あとは、作りたい物に応じて、必要なプログラムを学ぶ必要があるでしょう。ここで紹介する範囲は、サーバーサイド以外の、ブラウザ依存の物を中心に紹介します。

ちなみにサーバーサイドとは、サーバーにインストールする必要がある言語です。
ブラウザ依存とは、ブラウザ側で処理してもらうため、サーバーにインストールするものは特にありません。


HTML/CSS


【HTMLタグの簡単検索】TAG index - ホームページ作成情報
初歩的なタグの使い方から学べます。

HTML5+CSS3 入門 | yoppa org
そもそもHTMLとCSSでどんなことが出来るのかを掴む事が出来る優秀なエントリです。

結局どうすればいいの？ - Dive Into HTML5
HTML5について細かく学ぶための説明書です。

超初心者さんへ！TextEdit（メモ帳）とDropboxでWebページを作ろう
ちょと上で学んだ事を軽く試してみたいと言う人にお勧め記事。



携帯コーディング


永久保存版！？携帯コーディング、これだけ読めばすぐできる！
ひとまず携帯サイト（ガラパゴス携帯向け）を作るときに参考になります。
テンプレートまでついてるのでそれを見ながら学ぶ事が出来ます。

スマートフォン向けサイトの作り方
スマートフォン向けのサイトの作り方。HTML、CSSを理解していることが前提。現在はHTML5、CSS3がありますので、また違ったスキルになってきていますが。




プログラミング


プログラミング言語人気TOP10の簡易解説
サーバーサイドアプリケーションも含めて、そもそもどの言語を学ぶのかという点で悩んだらここ。

マンガで分かる JavaScriptプログラミング講座
漫画でわかる。とってもわかりやすい。

jQuery入門 (ver 1.2.6)
今の所人気のjQueryを学ぶ最適な入門情報。

jQuery リファレンス
jQueryを使って自分独自のコードが書きたいという人の為に。

いまさら聞けないiPhone/iPadアプリの作り方の基礎
ブラウザとかWebサイトとかじゃなく、アプリが作りたいんだという人向けのエントリ。

目次にもどる




素材の利用に対する著作権やライセンスについて



Web制作に欠かせないのが写真やイラストといった素材です。
しかし、Web上にあるもだからと言って、勝手に使ってはいけません。また、無料配布されているからといっても、それを商用サイトで使えるのかどうかという問題もあります。
さらに、クレジット表示（リンク元の情報を表示する義務）も必要な場合がありますので、しっかりと利用規約を確認し、ライセンスを学びましょう。
素材は、誰かが、誰かの為に撮影したり、用意したものです。敬意を忘れずに使いましょう。

• Webデザイナーが覚えておく、代表的なライセンスまとめ
• Webデザイナー必読？！著作権について知っておくべき10のこと
ちなみに以下では商用利用可能な素材サイトをご紹介しますが、一点だけ。

たとえば自分が撮影したからと言って、その画像をそのままWebで商用サイトに使えるかと言うと、それは大きな間違いです。そこに人物が写っていたり、建物が写っていたりすると、それに対して、本来使用許可を得る必要があります。

ただし、著作権が認められた建物はごくわずかで、ほとんどの場合、心配いらないとの事でした。エッフェル塔のように、昼は著作権を持たないが、ライトアップされた夜には著作権が発生するとか、町並み自体に著作権をもつ国がありますが、日本国内ではほぼなさそうです。（本来ビルには意匠権が与えられないはずが、なぜか六本木ヒルズが持ってたりと、全部が全部OKというわけでは無いようです）

目次にもどる



国内で商用でも使える素材サイト


あくまでも、現時点で私が確認した利用規約を元にコメントしたものですが、利用規約はいつ変わるかわかりません。
これらのコメントを見て頂けるとわかるかと思いますが、無料で商用でもなんでも利用可能でも、禁止されている事があったり、リンクを貼る必要があったりと、細かい部分は、どのサイトも微妙に違います。実際に自分の目で、確認する癖をつけましょう。



写真素材 足成【フリーフォト、無料写真素材サイト】
言わずと知れた国内最強の無料素材サイト。クレジット表記必要ない、個人、商用での利用可。Web、紙媒体などどの媒体でも利用できる素材を配布しています。ただし、それでも一定の禁止範囲が定められています。例えば求人広告における企業・団体を紹介する際に、モデルとしては利用できない写真等があります。よくご確認を。




商用可のロイヤリティーフリー無料写真素材集/GRA free photos
ロイヤリティフリーは著作権フリーではありません。利用できる範囲は個人・商用、そしてWebベースである、そして、クレジット表記が必要だと言うことです。ただし、企業サイトなどの制作で、その企業のページにどうしてもリンクを表記出来ない場合は、それを制作したデザイナーさんのサイト等でもかまわないという優しさがあります。




著作権フリー商用可！無料画像の写真素材♪ラブフリーフォト
私と同じ、まさかのFC2ブログです。写真は個人、商用で利用可能。また、再配布に関しては通常禁止しているところが多い中、こちらでは、「あまり加工していない画像の再配布禁止」となっており、寛大です。ただ、これを自身が撮影した物としてコンテストに出したり、アダルトサイト等で利用する事は出来ません。




ゆんフリー写真素材集
商用利用可の素材サイト。1万点以上あります。原則としてクレジット表記が必要になります。有償にてクレジット表記を取る事が可能。ただ、Web制作に関しては特に上以外の規制はありませんが、プロフィール画像に利用したりする場合には一定の規約がありますのでご確認ください。




フリー写真素材 Futta.NET
個人・商用問わず利用でき、クレジット表記義務も、リンク義務もありません。それでも販売は禁止です。しっかりと敬意を払い、利用規約は確認してください。現時点では年齢制限のあるサイトでも利用出来ますが、これらは、いつ変わるかわかりません。




2000ピクセル以上のフリー写真素材集
個人・商用問わず利用でき、クレジット表示義務もなければ、リンク義務もありません。紙媒体、パンフレットの利用も可能。写真をほとんど加工せずに販売する事は禁止されていますが、明らかに2次的なものに加工されたものは販売も許可されます。このあたりは、直接連絡を取って確認する必要があります。ただし、建物等の所有者に撮影許可を取って撮影したものではないため、商用利用した場合、建物の所有者との間に、使用料が発生する可能性があります。これに関しては利用者が責任を負うことに同意の上利用する形になります。




商用OK・加工OKの無料画像素材集【KOYU写】
商用利用も可能で、クレジット表示義務もありません。ただし、こちらも上と同様、建物の写真の使用許可を得て撮影しているものではありませんので、自己責任の部分が発生します。





PHOTO STOCKER – 高解像度フリー写真素材を無料配布。商用可能。ホームページにも。
商用利用可能で、クレジット表示義務もありません。ただし、説明では全てにおいて、配布や販売以外OKというようなニュアンスでかかれていますが、建築物に関する使用権を承諾しているという説明がないため、商用で使うには自己責任で。




Free.Stocker【無料・商用可・著作権表示不要】
こちらも商用利用可能でクレジット表示義務もありません。
上と同様に建築物に対する使用権の明記はありません。基本的にこれで何か言われるという事はありませんが、使い方によっては使用料を求められるケースがあります。

目次にもどる





海外での写真素材を利用


海外の素材は日本に比べるとさらに膨大です。撮影者の数が絶対的に多いからです。
しかし、日本語ではないという点から、利用規約に関して確認しないケースも多いです。もし、不安がある場合は国内サイトを利用する事をお勧めします。基本的に英語がダメだと細かい規約が読めませんので、さらっと紹介します。




Flickr: Creative Commons
大手写真投稿サイトのflickrの、クリエイティブコモンズライセンスを取得している画像サイトの検索ページです。
そのほとんどが、クレジット表記が必要になりますが、膨大な写真から選べるため、多くのブロガーが利用するキャプション画像に使われています。




stock.xchng - the leading free stock photography site
世界一有名ではなかろうかと言う素材サイト。商用利用可。ユーザー登録は必要。一部有償。
例えば、ロゴに利用できなかったり、アダルトサイト等の利用も禁止されている。





Image * After
商用利用可能な素材サイト。




Free Photo - Cepolina Photos
商用利用可能な素材サイト。




Free Royalty Free Stock Photography
ロイヤリティフリー。商用利用可能。




FreeDigitalPhotos.net
こちらもロイヤリティフリー。商用利用可能。

目次にもどる




無料フォント


フォントは、日本語対応のものでなければ、アルファベットしか書けません。
画像素材と違う点は、国内フォントも非常に重要なポイントです。



日本語無料フォント


手書き風のイメージを作るためのphotoshopブラシとフォント特集
手書き風の日本語フォントを収録してます。




商用サイトでも無料で利用できる日本語のフリーフォント集
商用可能な日本語フォント特集。





海外無料フォント集


dafont.com
おそらく国内においても人気の英語フォントサイト。ライセンスはそれぞれのフォントにあり、確認が必要。大原則として、再配布、販売は禁止です。

• Free for personal use（個人利用無料）
• Donationware(利用する価値があると判断したら寄付してください)
• Free(商用利用可)
• Shareware(無料で入手は出来るが使う場合は有償)
こんな感じ。不安があればFreeを使おう。




Free Fonts - Cool Fonts
商用利用可のものもあります。ライセンスに関しては、ダウンロードしたzipファイルの中に入ってます。書いてないのもありますが・・・。

目次にもどる



無料アイコン



ハイクオリティ無料アイコンまとめ100パック
様々なところで活用される無料アイコン集。




リンク不要で商用サイトにも利用可能なフリーのアイコンセットいろいろ
商用利用可のものを集めたリンク集。ただし、やはり規約は流動的なものなので、自身で確認するのが吉。




FIND ICONS
無料アイコンサーチエンジン。30万点の中から検索が可能。




SearchPSD - The PSD source
PSDファイル限定の検索エンジン。英語必須。

目次にもどる


とりあえずここまで書いてきてなんですが、自分がイメージした記事だと、この辺で多分半分くらいなので前編、後編にわけます。
後編はまた来週と言う事で。

それでは、また。

スポンサード リンク

トップへ戻る