戻る

このページは以下URLのキャッシュです
http://lifehack2ch.livedoor.biz/archives/51573841.html


webディレクターだけど、初心者に役立つサイト教える | ライフハックちゃんねる弐式

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

2chまとめのまとめまとめ+オワタあんてなアンテナシェア無気力↓朝目GirlsReaderブーン| ロリポ| しぃはいよる

2015年02月07日

27Comments |2015年02月07日 10:45|サイトまとめIT・インターネット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対応版




この記事へのコメント


1. ランチパックのナナシの剣で傷付けたピアノ  2015年02月07日 11:03  ID:IplEli.U0
ずっとHTMLとCSSとJavaScriptだけ使ってきたけど
最近PHP使うようになって世界が変わったわ
2. 自他とも認めるパーティマン  2015年02月07日 11:16  ID:PAYZi.Y30
disったアフィリサイトがまとめてて笑ったw
結局養分にされるんだな
3. 自他とも認めるパーティマン  2015年02月07日 11:20  ID:efQTd4Ad0
こういうの大好き
4. 自他とも認めるパーティマン  2015年02月07日 11:26  ID:k.Qe2D2e0
これは具体的にどう考えていいのかがわかる良記事。
Web関係の本ではまず掴めないところ。
5. 自他とも認めるパーティマン  2015年02月07日 11:28  ID:C8aXhLxB0
会社の仕事でhtmlとPHPとCSSをテキストに直打ちで
作れるようになった。今はもう使ってないど。
6. 自他とも認めるパーティマン  2015年02月07日 11:55  ID:dT34JlKc0
ぐちゃぐちゃソースが増えていきますな
7. 自他とも認めるパーティマン  2015年02月07日 12:04  ID:ntp3LnWM0
webサイトなんて「いらっしゃいませ」って書いて
周りに光る提灯GIFつけときゃ、それなりに見えるだろ
8. 自他とも認めるパーティマン  2015年02月07日 13:58  ID:EjvpTVkV0
これが良記事とか…冗談だろ。。
かんべんしてくれよ。。
9. 自他とも認めるパーティマン  2015年02月07日 14:35  ID:4z73nU2j0
※2
ここスッキリしてるからたぶんセーフじゃね?w
10. 自他とも認めるパーティマン  2015年02月07日 14:59  ID:C8tFChbB0
※どこがすっきりしてんだw

>>1の
> これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ

の直下にアフィ広告とか、さすがアフィブロガーとしか言いようがない
11. 自他とも認めるパーティマン  2015年02月07日 15:00  ID:k5LygFJ20
>>1でこんなこと言ってるけどどうせ自演だろ
アフィまとめ運営するくらいだからネットには精通してるだろうな
12. 自他とも認めるパーティマン  2015年02月07日 15:08  ID:QQloBtjn0
ぐちゃぐちゃコードのサイトはSEOとか考えてないのか
13. 自他とも認めるパーティマン  2015年02月07日 15:16  ID:QUmbDsFE0
※8
ここの紹介はあくまで初心者用なんだから、中級者以上対象じゃないかもね
良記事に見えないということは、もうあなたは初心者じゃないってことかと思うよ
14. 自他とも認めるパーティマン  2015年02月07日 15:41  ID:d0B.HHzN0
こんな自称webディレクター()が増えるからユーザビリティ無視なサイトが生まれていくんだよな
15. 自他とも認めるパーティマン  2015年02月07日 16:32  ID:mDkF8ZR40
wordpressって更新を怠ると乗っ取られるから怖い。
16.    2015年02月07日 16:34  ID:.ShgOwCV0
マジで※1って馬鹿の指定席だな
17. 自他とも認めるパーティマン  2015年02月07日 16:37  ID:y3PkVUom0
自称うぇぶでぃれくたー(笑)が増えてからこういう記事ばかり見るわ
ドットインストールがプロ(笑)に不評と言いながら
>>6を薦めてる時点でお里が知れるんだよな・・

WPを使えばそれっぽいサイトが作れるようになってから自称が本当に増えた
コピペしたサイトを量産しておいて「他のサイトはセンスが〜」とか言っちゃうからなあ
勘弁してくれ・・
18. 自他とも認めるパーティマン  2015年02月07日 17:25  ID:6ltgVlwS0
低品質のサイトだろうが、それでクレームが無けりゃ別にいいじゃん。文句言うのは極一部のプロだけ。
19. 自他とも認めるパーティマン  2015年02月07日 17:28  ID:7xaMRrfK0
※8
これが良記事じゃないんだったら、どーゆー記事が良記事か教えてくれるかい?
20. 自他とも認めるパーティマン  2015年02月07日 18:19  ID:LEfmm7sd0
冗談抜きでCMS方面の初心者向きのネタって少ないので俺個人には良記事。
ブクマしときます。
21. 自他とも認めるパーティマン  2015年02月07日 18:52  ID:mKPxbJUs0
趣味ならいいが金にならないから辞めとけ
22. 自他とも認めるパーティマン  2015年02月07日 19:08  ID:ZF86s2kz0
※2
お前バカだな。発言の意図が理解できてないじゃん。
23. 自他とも認めるパーティマン  2015年02月07日 19:30  ID:DAEuMYFp0
webディレクターのなり方教えろ
そもそもデザイナーと違うのか?
24. 自他とも認めるパーティマン  2015年02月07日 19:39  ID:vFwXsRIP0
bootstrap良いよね。
仕事で触った時に、MVC5と同じくらい感激した。
25. 自他とも認めるパーティマン  2015年02月07日 19:58  ID:9lSAe0R70
趣味として色々やってみたい俺からすれば良記事。

批判は例えば、プロ料理人が「クックパッド」を「いい加減なレシピ」って批判するのに似てる
26. 自他とも認めるパーティマン  2015年02月07日 20:38  ID:f7aueqGF0
>htmlからスクラッチビルド(一からつくり上げる方法)でやってる人も
だいたいはブートストラップ的なのを使ってる。

んなわけあるか。主語がでけーよ。
27. 自他とも認めるパーティマン  2015年02月07日 23:06  ID:1W8lFWm30
ソースコードがぐちゃぐちゃ、デザインぐちゃぐちゃなサイトしか作れないやつにこの記事に載せてあるようなサイトを教えるのは逆効果だろw
自称中級者みたいなのが増えて中途半端なもんがたくさん増えるぞ

※23
ぶっちゃけ役職は大して関係ないな
うちではディレクター的な仕事してる人が「デザイナー兼プログラマ」って自称してるし
特に個人の場合は好きに名乗っていい

みんなが見てる


コメントする

名前
 
  絵文字
 
 

卑猥な単語や誹謗中傷コメントは修正される場合がありますのでご了承くださいm(__)m

今週人気

    管理人厳選記事

    記事別アクセスランキング

    ブログパーツ

    注目













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