ライフハックちゃんねる弐式サイトまとめWeb・テクノロジー) > webディレクターだけど、初心者に役立つサイト教える

2015年02月07日

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

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

まずはドットインストール
sdfgh
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
hogeho
http://ja.wordpress.com/

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


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

ksk


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

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

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


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

wordpressなんて使わねえ。俺はちゃんとhtmlとcssで頑張るんだと
そう主張するやつ。悪いことは言わねえ、ブートストラップを使え。
hogheoge
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
hogehoge
http://kudakurage.com/ligature_symbols/

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


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

見出し素材のサイト
B9xe3xajFlHrAAAAAElFTkSuQmCC
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がわからなくてもテンプレさえあればなんとかなるよ
一応貼っておく
fAQssU9lrC8AAAAASUVORK5CYII=
http://websae.net/html5-templates-20140519/


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

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

まずは海外のハイセンスな画像サイトを紹介する。少し重いが我慢してくれ
FAAAAAElFTkSuQmCC
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

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

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


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

あとこれはトップ画像に応用することができると思って最近注目してる
シアターグラフというサイト
hogheoge
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

他は知らん、このサイトで適当に探して来い
hoge
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を公開してるサイトで
本物の映画みたいな映像を作る方法が学べる
lgmMAAAAASUVORK5CYII=
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
w8Oum3swrLJmwAAAABJRU5ErkJggg==
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
hgoehge
http://avocode.com/
コーディング作業に革命をもたらすとかもたらさないとか


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

P+jQVpwxONr0AAAAAElFTkSuQmCC
http://lamoulade.com/#!/projects

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


33 :以下、\(^o^)/でVIPがお送りします:2015/02/06(金) 18:49:26.85 ID:lT1LTGwL0.net

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

かんたんJimdo完全マニュアル  新UI対応版





 コメント一覧 (35)

    • 1. ランチパックのナナシの剣で傷付けたピアノ
    • 2015年02月07日 11:03
    • ずっとHTMLとCSSとJavaScriptだけ使ってきたけど
      最近PHP使うようになって世界が変わったわ
    • 2. 自他とも認めるパーティマン
    • 2015年02月07日 11:16
    • disったアフィリサイトがまとめてて笑ったw
      結局養分にされるんだな
    • 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
      ここスッキリしてるからたぶんセーフじゃね?w
    • 10. 自他とも認めるパーティマン
    • 2015年02月07日 14:59
    • ※どこがすっきりしてんだw
      >>1
      > これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
      の直下にアフィ広告とか、さすがアフィブロガーとしか言いようがない
    • 11. 自他とも認めるパーティマン
    • 2015年02月07日 15:00
    • >>1でこんなこと言ってるけどどうせ自演だろ
      アフィまとめ運営するくらいだからネットには精通してるだろうな
    • 12. 自他とも認めるパーティマン
    • 2015年02月07日 15:08
    • ぐちゃぐちゃコードのサイトはSEOとか考えてないのか
    • 13. 自他とも認めるパーティマン
    • 2015年02月07日 15:16
    • ※8
      ここの紹介はあくまで初心者用なんだから、中級者以上対象じゃないかもね
      良記事に見えないということは、もうあなたは初心者じゃないってことかと思うよ
    • 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
    • >>ばかなのかな?どこがアフィリリンクなんだい?
コメントフォーム
記事の評価
  • リセット
  • リセット

誹謗中傷な投稿内容には訴訟リスクが発生します。自己責任でお願いします。


みんなが見てる


今週人気


    注目
    B0BQVVBSNB
    B0BQVVBSNB
    B0BQVVBSNB
    B0BQVVBSNB
    スポンサードリンク
    remote-buy-jp7
    • ライブドアブログ