Webデザインと制作

FrontPage > Programing > Webデザインと制作

WebアプリとかWebサイトを作るとき、当然Webデザインが必要になる。

見栄えがカッコイイと、それだけで品質も高く見える。

というわけで、Webデザインをやるときの関連資料をまとめました。

レスポンシブWebデザイン †

スマートフォンやタブレットでも、パソコンでも見やすWebデザイン。それが、レスポンシブWeb。同じWebページが、デバイスの画面サイズに合わせて表示される。

いやもう、これは便利。作るほうも、最初から考慮しておいたほうがいい。

WordPressとか、デフォルトのテーマがレスポンシブWebになったし(Twenty Twelve)

というわけで、このWikiもブログも、そのほかも順次これに移行中。

参考資料 †

• Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
• レスポンシブWebデザインのメリット、デメリット比較まとめ - Photoshop VIP
• ASCII.jp：ゼロから始めるレスポンシブWebデザイン入門
• レスポンシブWebデザインはブームではない*ホームページを作る人のネタ帳

• iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net
• レスポンシブWebデザインに対応したCSSフレームワーク 10 « nanomal
• レスポンシブWebデザインに対応している CSS Framework 12個 | Egographica
• 著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net

• 【厳選】レスポンシブWebデザイン参考記事まとめ - NAVER まとめ

• SimpleGrid すげーシンプルらしい。MITライセンス

HTMLフレームワーク †

で、こういう機能とかデザインを盛り込んだHTMLフレームワークというのが、いろいろ配布されている。twitter Bootstrapが有名

基本的なこと †

• 初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
• 新人Webデザイナーが現場レベルでよく注意されるポイントのまとめ。 | モノづくりブログ 株式会社8bitのスタッフブログです
• グリッドデザインに使えるツールいろいろ | DesignWalker

twitter Bootstrap †

すげー有名らしい。レスポンシブのほかにも、いろいろできる。

• Bootstrap
  • はじめ方 英語
  • ドキュメント 英語
  • Twitter Bootstrap使い方-コンポーネント-v2.0.4

• Twitter謹製のCSSフレームワーク『Bootstrap』が大幅バージョンアップ中！ | IDEA*IDEA
• Twitter Bootstrapが大幅バージョンアップ！して凄まじいことに・・・ | IDEA*IDEA
• Twitter bootstrap入門 #twtr_hackスライド
• 便利すぎる！3分でサイト構築、Twitter Bootstrap。 | open book

• これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 大人になったら肺呼吸
• Twitter Bootstrapの使い方

• Initializr - Start an HTML5 Boilerplate project in 15 seconds!
• Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
• Bootstrapのフォームコード生成
• BootstrapのUIがドラッグアンドドロップだけで組める！最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」 | Chrome Life

• BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス２＋１つ紹介 ｜ クラスメソッド開発ブログ

• Twitter Bootstrap Skin - BootPuki Pukiwiki用のスキン

Bootstrap 3 †

• Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用 − Publickey
• Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ | HTML5Experts.jp
• Bootstrap3で何が変わるのかをまとめてみた | Pimp My Site

HTML Kickstart †

個人的に使っているのは、これ。Bootstrapに比べると軽量・コンパクト（？）ということらしい。

• HTML KickStart HTML Elements & Documentation
• HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
• 知らなきゃ損！CSSフレームワーク「HTML KickStart」の便利さを試してみた！ | 波乗りスタッフ日記/Web制作会社サーフボード
• 人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
• レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」 | ウェブデザイン・ネットワークに関するネタ帳
• HTML KickStartを使ってみた - ZeBeVogue別館

• HTML-KickStartを軽量化して導入しやすくした | ブログ :: Web notes.log

LESS：CSS拡張メタ言語 †

レスポンンシブWebやCSSフレームワークのカスタマイズでも、使われているみたいなので。

• CSSをシンプルに書くことができるLESS使ってみた | webOpixel
• ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
• LESSで3倍ラクするスマートフォンコーディング：連載｜gihyo.jp … 技術評論社

CSSフレームワークのまとめ記事 †

Webサービスで必須となるHTMLとCSSのひな形。

• WEBデザインに便利なCSSフレームワークのまとめ「Choosing The Best CSS Framework: A Complete Guide」 | DesignDevelop
• [CSS]スタイルシート設計のベースになる12のCSSのフレームワーク | コリス
• ふじこのプログラミング奮闘記
• 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 | DesignDevelop

• 個人的に使いそうなPHP、CSS、HTML等のフレームワーク17個 - かちびと. net
• CSS Frameworkを持つ - ゆーすけべー日記

特定のCSSフレームワーク †

• CSSのフレームワーク『Blueprint CSS』まとめ | IDEA*IDEA
• 秋元@サイボウズラボ・プログラマー・ブログ: yaml - CSSフレームワークライブラリとそのブラウザエディタ yaml builder
• シンプルなもう一つのCSS Framework「inuit.css」 - ゆーすけべー日記

• 30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記

パーツ †

• 選んで、見て、使える簡単CSS3ジェネレーター「CSS3 Generator」 | DesignDevelop
• フリーで使えるCSS3のメニュージェネレーター「CSS3 Menu. Free CSS Menu Maker」 | DesignDevelop

関連ページ †

• Webサービス構築
• Webサービス構築