【沈黙の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/

以前2ちゃんでも流行った「一部だけ動く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/






22: 以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 18:23:10.65 ID:flJZIImc+.net
誰も見てねえのかよ






25: 以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 18:25:22.52 ID:flJZIImc+.net
じゃあこっからは脈絡なく適当に貼っていくぞ

After EffectsのTipsを公開してるサイトで
本物の映画みたいな映像を作る方法が学べる

http://www.videocopilot.net/tutorials/






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
http://semooh.jp/jquery/sample/






29: 以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 18:31:35.49 ID:ZfdvfqG30.net
>>28
サンクス






30: 以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 18:33:08.23 ID:flJZIImc+.net
jQueryプラグインのサイトも一応
http://www.unheap.com/

http://bestofjquery.com/






27: 以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 18:28:11.09 ID:flJZIImc+.net
https://zenback.jp/
ブログ記事の下にコメント欄やらシェア欄を勝手に作ってくれるサービス
いろいろ考えるのがめんどくさいやつはこれで事足りる







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
これから勉強しようとしてたからありがたい






Webディレクション


無題のドキュメントからひっそりお知らせ→
引用元:http://viper.2ch.sc/test/read.cgi/news4vip/1423212084/