【VIP】webディレクターだけど、初心者に役立つサイト教える てんこもり。


powered by てんこもり。

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

1:  以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:42:31.05 ID:flJZIImcH
最近クソみたいなデザインとグッチャグチャのソースコード書いてる 
ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 
これからサイト作る初心者用にサイトを紹介していく 
これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ

2:
以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:42:31.08 ID:flJZIImcH

まずはドットインストール
1

http://dotinstall.com/

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

3: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:43:00.86
支援

4: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:44:28.65 ID:flJZIImcH
次、wordpress 
2

http://ja.wordpress.com/ 

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

6: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:47:31.80 ID:flJZIImc+
wordpress関連で高橋のり様のwebデザインレシピ
3

http://webdesignrecipes.com/ 

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

7: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:52:27.16 ID:flJZIImc+
wordpressなんて使わねえ。俺はちゃんとhtmlとcssで頑張るんだと 
そう主張するやつ。悪いことは言わねえ、ブートストラップを使え。 
5

http://getbootstrap.com/ 

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

8: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:52:59.53 ID:flJZIImc+
亀ですまん書き溜めてないんでな

9: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:55:18.89 ID:flJZIImc+
基礎がわかったら次はデザインの優れたサイトを見て、だいたいの作りたいイメージをつくれ 
1

http://w3q.jp/t/3903 


2

http://www.ikesai.com/ 


3

http://gooddesignweb.com/ 

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

11: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:59:50.91 ID:flJZIImc+
ページ内で必要なアイコンやら見出し素材を紹介する 

まずはLigature Symbols 
1

http://kudakurage.com/ligature_symbols/ 

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

12: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:02:02.62 ID:flJZIImc+
見出し素材のサイト 
2

http://www.toriho-dai.com/tittle/tittle6.html 

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

13: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:02:11.77
html挫折した俺が通りますよ

14: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:03:39.29 ID:flJZIImc+
>>13 
htmlがわからなくてもテンプレさえあればなんとかなるよ 
一応貼っておく 
5

http://websae.net/html5-templates-20140519/

15: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:06:59.08 ID:flJZIImc+
次に写真素材だ 
トップ画像を作るために必需品となる 
イラレやフォトショでロゴを作れないやつは画像に適当に文字さえ入れとけばそれっぽくなる 

まずは海外のハイセンスな画像サイトを紹介する。少し重いが我慢してくれ 
3

http://www.raumrot.com/10/

16: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:08:19.90 ID:flJZIImc+
日本の有名画像素材サイト足成 
俺はあまり好きじゃないが、ここを避けては通れない 
1

http://www.ashinari.com/

17: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:09:30.65 ID:flJZIImc+
背景用の画像に役立つのがこのテクスチャーキング 
2

http://www.textureking.com/ 

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

18: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:12:22.39 ID:flJZIImc+
あとこれはトップ画像に応用することができると思って最近注目してる 
シアターグラフというサイト 
3

http://theatergraph.com/ 

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

19: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:17:16.77 ID:flJZIImc+
一応動画素材と音声素材のサイトも紹介する。ページが重くなるので 
あまりおすすめはしない 

Videzzy(動画) 
4

http://www.videezy.com/ 


Mazwai(動画) 
1

http://mazwai.com/ 


Distill(動画) 
2

http://www.wedistill.io/ 


SoundLabel(音楽) 
3

http://www.snd-jpn.net/free_sound/ 


こんとどぅふぇ(音楽)
4

http://conte-de-fees.com/

20: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:20:52.42 ID:flJZIImc+
フォント関連 
糞みてえな明朝体フォントを使ってるサイトはどれだけフォントが重要かを理解していない 
フォント次第で印象は200%変わる。 
英語を使うならGoogleフォントを使え 
ほとんどここで使いたいフォントが簡潔する。 
1

https://www.google.com/fonts 


他は知らん、このサイトで適当に探して来い 
2

http://fontfree.me/

21: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:22:33.86 ID:flJZIImc+
これだけ網羅すればなんとかなる。 
あとはコリスの更新情報に目を通すのは必須 
未だにここなしではやっていけない 
6

http://coliss.com/

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

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

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

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

26: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:27:27.21
jQueryの便利なサイト教えて

28: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:29:42.56 ID:flJZIImc+

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

27: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:28:11.09 ID:flJZIImc+8


https://zenback.jp/
 
ブログ記事の下にコメント欄やらシェア欄を勝手に作ってくれるサービス 
いろいろ考えるのがめんどくさいやつはこれで事足りる

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

http://www.unheap.com/ 


2

http://bestofjquery.com/

31: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:37:59.32 ID:flJZIImc+
最近なにかと騒がれているAvocode 
3

http://avocode.com/ 
コーディング作業に革命をもたらすとかもたらさないとか

32: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:41:06.15 ID:flJZIImc+
4

http://lamoulade.com/#!/projects
 

個人的にすごく好きなデザインのサイト 
シングルページの可能性を感じる

33: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 18:49:26.85
これから勉強しようとしてたからありがたい

関連記事


コメントの投稿

非公開コメント

♯50881
内容も精査せずにwordpressを勧めるwebディレクターは総じてカス
♯50882
WordPressはPHPで作ってる分セキュリティに気を配る必要がある。
どうしても使いたいならWordpress.com
後アフィブログは広告を半分ぐらい削れば見た目は良くなる。
♯50884
で、管理人はこの社畜の言う事を何か一つ実行できた?
どこかに成果がある筈なんだけどな~
♯50888
自分のブクマ自慢したいだけじゃん
♯50908
初学者向けじゃなくて素材ばっかりじゃん。
これでディレクター名乗ってるの?
♯50914
>初学者向け
・・・初心者用と書いてあるだろうが!勝手に変換するな。
♯50977
なにこれ・・ひどいなw
かうんたっく

買って得したスレをまとめてチェック!
買って、得したな~と思うもの まとめ
最近の記事
ここ一ヶ月でアクセスの多かった記事
はてブで見るてんこもり。 (新)
はてブで見るてんこもり。
カテゴリー
検索フォーム
年度別おすすめ記事
アクセス解析

なかのひと

ブログパーツ
プロフィール

Author: かずな
メールはtenkomoあっとgmail.comまで
ヘッドラインはメールとか逆アクセスで

元管理人 もら太
更新情報はこちら!↓

携帯からもてんこもり!
QR
月別アーカイブ
最近のコメント
リンク
他サイト人気記事
スポンサーリンク