WEBディレクターだけど、初心者に役立つサイト教える
    2015年02月07日 コメント(22) 家電・PC・ソフト 
    webdesignheader
    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/






    24以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 18:25:00.79 ID:ZfdvfqG30.net
    知ってるサイトしかなかった






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

    After EffectsのTipsを公開してるサイトで
    本物の映画みたいな映像を作る方法が学べる
    http://www.videocopilot.net/tutorials/






    ss="13pxx">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
    Index of Semooh jQuery Sample Site
    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
    これから勉強しようとしてたからありがたい



    http://viper.2ch.sc/test/read.cgi/news4vip/1423212084/
    プロとして恥ずかしくない 新・WEBデザインの大原則
    エムディエヌコーポレーション(MdN) (2015-01-15)
    売り上げランキング: 11,218
    • 「WEBディレクターだけど、初心者に役立つサイト教える」をTwitterに投稿する
    • 「WEBディレクターだけど、初心者に役立つサイト教える」をいいね!する
    この記事へのコメント
    1. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月07日 22:11
    こいつは良い奴
    2. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月07日 22:31
    いらっとして終わるか行動に移せるかは大きい
    いっそ押しかけ営業までやってみてほしい
    3. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月07日 22:37
    「HTML如きで挫折する奴は向いてない」
    って言う天才プログラマさんがコメ欄に現れそうな予感!
    4. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月07日 22:47
    後で読みたい

    でも英語の壁にぶつかりそう(´・ω・`)
    5. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月07日 22:48
    わいコーディングに自信ニキ。
    6. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月07日 22:52
    webディレクター(笑)ごときが何を偉そうに
    7. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月07日 23:28
    HTML如きで挫折する奴は向いてない
    挫折したけど
    8. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 00:04
    トホホで充分
    9. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 00:15
    コーディングするなら
    「Sublime Text 2 + Sass + Compass + Emmet」
    が、今のところ最強
    導入が面倒くさいから、検索する気も起きない人にはオススメしない
    10. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 00:18
    コーディングなんて適当なエディタで十分だよ
    11. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 01:05
    この人のやり方じゃ、それなりのものしか作れないぞ。
    全部がテンプレどうりになってしまうんだがw
    まぁテンプレに頼ったやり方しか出来ないってのが多いから仕方ないかもしれんが。
    12. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 01:22
    最初はテンプレでってことだろ
    初心者に役立つって書いてあるだろ
    13. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 01:35
    初心者がテンプレに頼らなくてどうするんだ。その後どうするかはその人次第。
    14. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 02:28
    bootstrapいじってみたことあるけどネストが深くなりまくってウザい
    15. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 02:30
    プロとして恥ずかしからスレなんか立てるな
    16. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 02:40
    内容見た感じweb覚えたての子が有頂天になってスレ建てたって感じだな
    17. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 04:06
    どういうコードがぐちゃぐちゃで、
    どういうコードがプロらしく整理されているのかよく分からん。

    素人によく分からないように書いてあるのは
    書いてる本人もよく分かってない証拠。
    18. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 04:16
    最初からコードを書いてはじめるのがいいって言う人も居れば
    ツール使ってなんちゃってプログラミングから始めるほうがいいって人も居る
    自分にあった方法を見つけるのが大事
    19. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 04:23
    移り変わりに流行り廃りがはやいなぁ
    CSS+テーブルコーディングでとまってるわ
    20. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 09:14
    この程度の知識でよくスレ立てる気になれたな
    仕事で少しできるようになった程度の半素人にありがちな根拠の無い自信だけしかないな
    21. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 11:42
    大半が>>1のレスでワロタ
    22. Posted by 以下、金ぴか名無しさんがお送りします。   2015年02月08日 12:29
    いやまあ知らないサイトもあったからいいかな
    名前:
      情報を記憶:
    コメント:
     
    ※連投、荒らし、宣伝、不適切と判断されたコメントはNGの対象になります
      当サイトについて
      記事検索
      アーカイブ
      スポンサードリンク