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

ディレクターさん良いサイトを紹介してくれました。
アフィリエイトをやっていくに辺り、HTML、CSS、WordPressなど使えるに越したことないですね。

サイトのデザイン・画像・フォントをちょっと手を加えるだけで大きく違ってきます!

以下ディレクターさん

最近クソみたいなデザインとグッチャグチャのソースコード書いてる
ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、
これからサイト作る初心者用にサイトを紹介していく
これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ

まずはドットインストール
web-01
http://dotinstall.com/

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

次、wordpress
web-02
http://ja.wordpress.com/

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

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

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

wordpressなんて使わねえ。俺はちゃんとhtmlとcssで頑張るんだと
そう主張するやつ。悪いことは言わねえ、ブートストラップを使え。
web-04
http://getbootstrap.com/

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

基礎がわかったら次はデザインの優れたサイトを見て、だいたいの作りたいイメージをつくれ
http://w3q.jp/t/3903
http://www.ikesai.com/
http://gooddesignweb.com/

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

ページ内で必要なアイコンやら見出し素材を紹介する

まずはLigature Symbols

web-05

http://kudakurage.com/ligature_symbols/

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

見出し素材のサイト
web-06
http://www.toriho-dai.com/tittle/tittle6.html

最近はcssだけで見出しをそれっぽく加工するが、それがめんどくさいやつは
ここの素材を使うだけで見た目が改善するはずだ
htmlがわからなくてもテンプレさえあればなんとかなるよ
一応貼っておく
web-07
http://websae.net/html5-templates-20140519/

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

まずは海外のハイセンスな画像サイトを紹介する。少し重いが我慢してくれ
web-08
http://www.raumrot.com/10/

日本の有名画像素材サイト足成
俺はあまり好きじゃないが、ここを避けては通れない
http://www.ashinari.com/

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

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

あとこれはトップ画像に応用することができると思って最近注目してる
シアターグラフというサイト
web-10
http://theatergraph.com/

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

一応動画素材と音声素材のサイトも紹介する。ページが重くなるので
あまりおすすめはしない

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/

フォント関連
クソみてえな明朝体フォントを使ってるサイトはどれだけフォントが重要かを理解していない
フォント次第で印象は200%変わる。
英語を使うならGoogleフォントを使え
ほとんどここで使いたいフォントが簡潔する。

web-16
https://www.google.com/fonts

グーグルフォント使い方の使い方はこちらのサイト
他は知らん、このサイトで適当に探して来い
web-11
http://fontfree.me/

これだけ網羅すればなんとかなる。
あとはコリスの更新情報に目を通すのは必須
未だにここなしではやっていけない

web-17
http://coliss.com/

じゃあこっからは脈絡なく適当に貼っていくぞ

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

jQueryの便利なサイト
web-13
http://semooh.jp/jquery/sample/

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

jQueryプラグインのサイトも一応
http://www.unheap.com/
http://bestofjquery.com/

最近なにかと騒がれているAvocode
web-14
http://avocode.com/
コーディング作業に革命をもたらすとかもたらさないとか

web-15
http://lamoulade.com/#!/projects

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

にほんブログ村 小遣いブログ アフィリエイトへ
にほんブログ村

アフィリエイト ブログランキングへ
更新の励みになりますのでクリックお願い致します!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>