https://lifehack2ch.livedoor.biz/archives/51573841.html

以下の内容はhttps://lifehack2ch.livedoor.biz/archives/51573841.htmlより取得しました。

2015年02月07日

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

35コメント｜2015年02月07日 10:45｜サイトまとめ｜Web・テクノロジー｜Edit

タグ：: 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/

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

3 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:43:00.86 ID:dEC9e03/0.net

支援

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

次、wordpress

http://ja.wordpress.com/

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

5 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:46:10.27 ID:dEC9e03/0.net

ｋｓｋ

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/

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
サンクス

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

これから勉強しようとしてたからありがたい

編集元：「webディレクターだけど、初心者に役立つサイト教える」

コメントする

コメント一覧 (35)

- 1. ﾗﾝﾁﾊﾟｯｸのﾅﾅｼの剣で傷付けたﾋﾟｱﾉ
- 2015年02月07日 11:03
- ずっとHTMLとCSSとJavaScriptだけ使ってきたけど
  最近PHP使うようになって世界が変わったわ
- 2. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 11:16
- disったアフィリサイトがまとめてて笑ったｗ
  結局養分にされるんだな
- 3. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 11:20
- こういうの大好き
- 4. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 11:26
- これは具体的にどう考えていいのかがわかる良記事。
  Web関係の本ではまず掴めないところ。
- 5. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 11:28
- 会社の仕事でhtmlとPHPとCSSをテキストに直打ちで
  作れるようになった。今はもう使ってないど。
- 6. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 11:55
- ぐちゃぐちゃソースが増えていきますな
- 7. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 12:04
- webサイトなんて「いらっしゃいませ」って書いて
  周りに光る提灯GIFつけときゃ、それなりに見えるだろ
- 8. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 13:58
- これが良記事とか…冗談だろ。。
  かんべんしてくれよ。。
- 9. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 14:35
- ※2
  ここスッキリしてるからたぶんセーフじゃね？ｗ
- 10. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 14:59
- ※どこがすっきりしてんだｗ
  >>1の
  > これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
  の直下にアフィ広告とか、さすがアフィブロガーとしか言いようがない
- 11. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 15:00
- >>1でこんなこと言ってるけどどうせ自演だろ
  アフィまとめ運営するくらいだからネットには精通してるだろうな
- 12. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 15:08
- ぐちゃぐちゃコードのサイトはSEOとか考えてないのか
- 13. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 15:16
- ※８
  ここの紹介はあくまで初心者用なんだから、中級者以上対象じゃないかもね
  良記事に見えないということは、もうあなたは初心者じゃないってことかと思うよ
- 14. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 15:41
- こんな自称webディレクター()が増えるからユーザビリティ無視なサイトが生まれていくんだよな
- 15. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 16:32
- wordpressって更新を怠ると乗っ取られるから怖い。
- 16. 　
- 2015年02月07日 16:34
- マジで※1って馬鹿の指定席だな
- 17. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 16:37
- 自称うぇぶでぃれくたー（笑）が増えてからこういう記事ばかり見るわ
  ドットインストールがプロ（笑）に不評と言いながら
  >>6を薦めてる時点でお里が知れるんだよな・・
  WPを使えばそれっぽいサイトが作れるようになってから自称が本当に増えた
  コピペしたサイトを量産しておいて「他のサイトはセンスが〜」とか言っちゃうからなあ
  勘弁してくれ・・
- 18. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 17:25
- 低品質のサイトだろうが、それでクレームが無けりゃ別にいいじゃん。文句言うのは極一部のプロだけ。
- 19. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 17:28
- ※8
  これが良記事じゃないんだったら、どーゆー記事が良記事か教えてくれるかい？
- 20. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 18:19
- 冗談抜きでCMS方面の初心者向きのネタって少ないので俺個人には良記事。
  ブクマしときます。
- 21. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 18:52
- 趣味ならいいが金にならないから辞めとけ
- 22. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 19:08
- ※2
  お前バカだな。発言の意図が理解できてないじゃん。
- 23. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 19:30
- webディレクターのなり方教えろ
  そもそもデザイナーと違うのか？
- 24. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 19:39
- bootstrap良いよね。
  仕事で触った時に、MVC5と同じくらい感激した。
- 25. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 19:58
- 趣味として色々やってみたい俺からすれば良記事。
  批判は例えば、プロ料理人が「クックパッド」を「いい加減なレシピ」って批判するのに似てる
- 26. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 20:38
- >htmlからスクラッチビルド（一からつくり上げる方法）でやってる人も
  だいたいはブートストラップ的なのを使ってる。
  んなわけあるか。主語がでけーよ。
- 27. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月07日 23:06
- ソースコードがぐちゃぐちゃ、デザインぐちゃぐちゃなサイトしか作れないやつにこの記事に載せてあるようなサイトを教えるのは逆効果だろw
  自称中級者みたいなのが増えて中途半端なもんがたくさん増えるぞ
  ※23
  ぶっちゃけ役職は大して関係ないな
  うちではディレクター的な仕事してる人が「デザイナー兼プログラマ」って自称してるし
  特に個人の場合は好きに名乗っていい
- 28. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月08日 00:47
- 当方コーディングにアレルギー反応を起こすデザイナー。
  賛否両論あるみたいだけどこれは良記事だと思った。勉強してみようって気になった。
- 29. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月08日 01:54
- いいよ初心者向きなら、
  でもWEBディレクターが大規模なSNSをwordpressでいけるなんて言っちゃうのはまずいな。データベースカオスになって運用しにくいぞ。こんなんがディレクターやるからクソサイトが出来上がるんだろ。
- 30. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月08日 03:41
- アフィはプロバイダのテンプレ使ってるだろうに
  TumblurとかGohst使ってるサイトが乱立してる中で紹介するならまだしも
  日本のブログ体系で生きるアフィに紹介する内容なのかこれ
  ヘッダーにフィルタ掛けた写真使うアフィサイトなんか見たことねーぞ
  ワイヤーとヘッダーデザイン集へのリンクでも並べる方がまし
- 31. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月08日 04:21
- webディレクターって年取って仕事あるんかなと不安になる。
- 32. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月08日 11:08
- ぶっちゃけクソみたいなデザインとグッチャグチャのソースコード書いてるランキング系アフィサイトは、大部分がWEBマーケティング会社が作ってるんだよな。
  個人なら基本的に他社提供のブログ使うし。
  WEBディレクターも制作から昇格してなる人もいれば、知識だけでなんもできねーからディレクター名乗ってる人もいるしなぁ。
  この>>1は後者に近い気がする。
- 33. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月08日 15:05
- >>6の一番上で紹介されているまとめ記事を見てみたけど、
  どこがいいのか全く分からない。
  特に一番上で紹介されているrumiko matsumotoのサイトなんて、一瞬で閉じるレベル。くっさ。
  字が小さいし背景が明るいのに字が白くて読みづらすぎるし。
  こんなのがハイセンス？
  読む気にすらならないのにこんなサイト作る意味あるの？
- 34. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月09日 14:04
- 参考になった
- 35. 自他とも認めるﾊﾟｰﾃｨﾏﾝ
- 2015年02月22日 15:34
- >>ばかなのかな？どこがアフィリリンクなんだい？