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

2015年02月07日

│コメント(7)

│家電・PC・ソフト

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
サンクス
27 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:28:11.09 ID:flJZIImc+.net: https://zenback.jp/
ブログ記事の下にコメント欄やらシェア欄を勝手に作ってくれるサービス
いろいろ考えるのがめんどくさいやつはこれで事足りる
30 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:33:08.23 ID:flJZIImc+.net: jQueryプラグインのサイトも一応
http://www.unheap.com/
http://bestofjquery.com/
31 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:37:59.32 ID:flJZIImc+.net: 最近なにかと騒がれているAvocode
http://avocode.com/
コーディング作業に革命をもたらすとかもたらさないとか
32 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:41:06.15 ID:flJZIImc+.net: http://lamoulade.com/#!/projects

個人的にすごく好きなデザインのサイト
シングルページの可能性を感じる
33 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 18:49:26.85 ID:lT1LTGwL0.net: これから勉強しようとしてたからありがたい