WEBディレクターだけど、初心者に役立つサイト教える : ゆいたんねる

1 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:41:24.70 ID:flJZIImcH.net

最近クソみたいなデザインとグッチャグチャのソースコード書いてる
ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、
これからサイト作る初心者用にサイトを紹介していく
これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ

2 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:42:31.08 ID:flJZIImcH.net

まずはドットインストール
http://dotinstall.com/

開発環境の構築方法からプログラミング言語の基礎の基礎を教えてくれる
一回の動画の時間が短く区切られているので使いやすい。
プロからはあまり評判が良くないが、必要最低限のことはここで十分だ

4 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:44:28.65 ID:flJZIImcH.net

次、wordpress
http://ja.wordpress.com/

フリーのCMSの代表格。これの導入さえできればあとは
てきとーにテンプレを導入すればとりあえずの体裁は整えられる
プラグインといわれる拡張機能みたいなのも豊富で
いわゆるネットショップやSNSみたいな大規模なサイトでも十分に作れる。
更新も簡単なので企業のwebサイトでも多々利用されている。
htmlの勉強すら面倒臭がるやつはここを使っとけ。そのうちphpにぶつかるけどな

6 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:47:31.80 ID:flJZIImc+.net

wordpress関連で高橋のり様のwebデザインレシピ
http://webdesignrecipes.com/

wordpressの構造をわかりやすく教えてくれるサイト。この人の本も買ったが
初学者にはかなりわかりやすい。

7 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:52:27.16 ID:flJZIImc+.net

wordpressなんて使わねえ。俺はちゃんとhtmlとcssで頑張るんだと
そう主張するやつ。悪いことは言わねえ、ブートストラップを使え。
http://getbootstrap.com/

もともとはtwitterの社内で使われてたらしい
かなり簡単にhtmlとcssのひな形を作ってしまえるのが強み
htmlからスクラッチビルド（一からつくり上げる方法）でやってる人も
だいたいはブートストラップ的なのを使ってる。使い方はググれ
ドットインストールでも講座があったような気がする

9 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:55:18.89 ID:flJZIImc+.net

基礎がわかったら次はデザインの優れたサイトを見て、だいたいの作りたいイメージをつくれ
http://w3q.jp/t/3903
http://www.ikesai.com/
http://gooddesignweb.com/

とりあえず俺がブックマークしてたページを貼っておく

11 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:59:50.91 ID:flJZIImc+.net

ページ内で必要なアイコンやら見出し素材を紹介する

まずはLigature Symbols
http://kudakurage.com/ligature_symbols/

こいつは普通のアイコンじゃねえぞ。アイコン画像ってのはページを重くする原因になりやすい
そこでアイコンフォントってのが登場した。もちろんアイコンフォントを使ってくれてもいい
だがこのLigatureSymbolsはアイコンフォントの弱点を補うことができる画期的なフォントだ。
詳しくは書かないが、googleに検索されやすくなる可能性がある。使い方はぐぐってくれ

12 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:02:02.62 ID:flJZIImc+.net

見出し素材のサイト
http://www.toriho-dai.com/tittle/tittle6.html

最近はcssだけで見出しをそれっぽく加工するが、それがめんどくさいやつは
ここの素材を使うだけで見た目が改善するはずだ

13 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:02:11.77 ID:Zfpzv4Ena.net

html挫折した俺が通りますよ

14 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:03:39.29 ID:flJZIImc+.net

>>13
htmlがわからなくてもテンプレさえあればなんとかなるよ
一応貼っておく
http://websae.net/html5-templates-20140519/

15 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:06:59.08 ID:flJZIImc+.net

次に写真素材だ
トップ画像を作るために必需品となる
イラレやフォトショでロゴを作れないやつは画像に適当に文字さえ入れとけばそれっぽくなる

まずは海外のハイセンスな画像サイトを紹介する。少し重いが我慢してくれ
http://www.raumrot.com/10/

16 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:08:19.90 ID:flJZIImc+.net

日本の有名画像素材サイト足成
俺はあまり好きじゃないが、ここを避けては通れない
http://www.ashinari.com/

17 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:09:30.65 ID:flJZIImc+.net

背景用の画像に役立つのがこのテクスチャーキング
http://www.textureking.com/

コンクリとか木材の感じが出せるのでおすすめ

18 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:12:22.39 ID:flJZIImc+.net

あとこれはトップ画像に応用することができると思って最近注目してる
シアターグラフというサイト
http://theatergraph.com/

以前２ちゃんでも流行った「一部だけ動くgif画像」の共有サイトだ
ファッション系の企業のトップページで使うところが増えてきているから参考にしてくれ

19 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:17:16.77 ID:flJZIImc+.net

一応動画素材と音声素材のサイトも紹介する。ページが重くなるので
あまりおすすめはしない

Videzzy（動画）
http://www.videezy.com/
Mazwai（動画）
http://mazwai.com/
Distill（動画）
http://www.wedistill.io/
SoundLabel（音楽）
http://www.snd-jpn.net/free_sound/
こんとどぅふぇ（音楽）
http://conte-de-fees.com/

20 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:20:52.42 ID:flJZIImc+.net

フォント関連
糞みてえな明朝体フォントを使ってるサイトはどれだけフォントが重要かを理解していない
フォント次第で印象は200%変わる。
英語を使うならGoogleフォントを使え
ほとんどここで使いたいフォントが簡潔する。
https://www.google.com/fonts

他は知らん、このサイトで適当に探して来い
http://fontfree.me/

21 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:22:33.86 ID:flJZIImc+.net

これだけ網羅すればなんとかなる。
あとはコリスの更新情報に目を通すのは必須
未だにここなしではやっていけない
http://coliss.com/

24 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:25:00.79 ID:ZfdvfqG30.net

知ってるサイトしかなかった

25 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:25:22.52 ID:flJZIImc+.net

じゃあこっからは脈絡なく適当に貼っていくぞ

After EffectsのTipsを公開してるサイトで
本物の映画みたいな映像を作る方法が学べる
http://www.videocopilot.net/tutorials/

ss="13pxx">26 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:27:27.21 ID:ZfdvfqG30.net

jQueryの便利なサイト教えて

28 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:29:42.56 ID:flJZIImc+.net

>>26
Index of Semooh jQuery Sample Site
http://semooh.jp/jquery/sample/

29 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:31:35.49 ID:ZfdvfqG30.net

>>28
サンクス