複数のレイヤーで重ねたサークル 半透明のサークル かなり大きなサークル ナビゲーション用のサークル ヘッダに使うサークル 複数のカラーを使ったサークル 繊細なサークル 背景に使う数多くのサークル ギャラリーに使うサークル クリエイティブなサークル …

雰囲気のキーワードを出す ・カッコイイ！ うぉ！すっげ！って感じ ・クール とにかく渋く。鳥肌立つ感じで ・可愛いっぽく。 やっぱ少し可愛くが良い ・ラブリーa& もうワクワクーって感じでe& ・シンプルに。 余計な物はいらん ・インパクトどーん とにか…

ロゴ画像を作るというのはなかなか骨の折れるクリエイティブな作業であり、しかもその製品やサービス、企業のアイデンティティというものを込めなければならず、しかも今後の「顔」にもなるので、その苦労は並大抵ではありません。そのため、実際にロゴが生…

リニューアル時のポイントや使ったプラグインなど【サイト制作時やリニューアル時の参考になる。どんなサイトを作りたいのか、何を載せるのか、誰に見せるのか、何を使えばいいのか、など】

1：Webデザインの基本 2：タイポグラフィーとフォント 3：素材の作り方 4：レイアウトの作り方 5：Webデザインの参考

色名を漢字で、またその由来なども書いてある。

最近僕の周りでWEBデザインの勉強やコーディングの勉強を始める人が多く、そんな方々向けに読んで欲しい、見て欲しいサイトをまとめる機会があったのでブログにポストします。

Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ！Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試して…

Aを活用したロゴデザイン集。 どういうメーカーがどういう形でAを利用するのかと言うのはとても勉強になりましたのでシェア。 【これは勉強になる、応用できそうだ】

さすがデザイナーたちが作った本だけあって、装丁も美しい。見開き2ページで1トピックが簡潔にまとめられているのもいい。ページのレイアウトもきちんとした2カラム構成で読みやすい。まるでそれ自体がウェブページのようである（意図的かどうかは知らないが…

前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。今回はCSSでテキストにグラデーションをかけるテクニックについてで…

・「Webデザイナーのためのタイポグラフィと文字組版」 - DTP Transit www.dtp-transit.jp ・Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き webdesignrecipes.com ・Illustratorで文章を扱うとき（文字組版） - DTP Transit www.dtp-trans…

サイトのURLをScreenflyに入力すると、標準パソコン（10インチのネットブックから24インチのデスクトップまで）、5種類のタブレット、8種類の携帯デバイス、3種類のテレビでの表示を確認できます。『Wordpress』や『Joomla』などのプラットフォームで作成さ…

ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉…

「和色大辞典」と題された無料の色辞典サイトには、日本の伝統色がRGBカラーコード付きでまとめられています。その数456色。ディスプレイ上で表現できる色に限られるとはいえ、微妙な違いにも別の色の名前が付けられている、と知るだけでも感慨深いものがあ…

最近リリースされたものを中心に、高品質なフリーのデザインフォントを紹介します。【日本語フォントはないようだ】

3日目の講義ではちょっとしたボタンを制作したのですが、テキストに載っていたボタンがちょっとおかしな感じだったので、反射光に関して簡単に説明してから、反射光を取り入れたボタンを制作しました。Evernote（Local）に全文保存

私は、職業柄（？）プログラマー・SEの方などに「これからWebデザインもやりたいけど、どうすればいいか」と相談されることがあります。 そういう時、私はまず「優れたデザインのサイトを見て、それをスケッチする」ことを薦めています。たった1度やって頂く…

Fireworksでウェブデザインをもっと素敵に、効率よく。FireworksマニアはWebデザイナーに贈る、Fireworksの使い方、チュートリアル、デザインアイディアを紹介するサイトです。【ワタシの古いバージョンでもできるかな】

本日から新たに、「Webデザイン入門」というタイトルで連載を始めます。 9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフ…

Croppy にログインしたあと、気になるデザインのサイトを見つけたときにブックマークレットをクリックするだけでこのような画面になり、Photoshop の切り抜きツールのような感覚で見ているページの一部を切り抜くことができます。切り抜かれたパーツは、「ヘ…

デザインのセオリーって いっぱいあるけれど もしいま自分のスタイルをもっているなら あまり重要視しなくてもいい気がする。もちろんルールやセオリーはたくさんあるんだけど 正しいのだけど 整った美人さんは綺麗だけど どこか魅力にかけるといった 作品が…

「文章デザイン」「配色」という２つの基本技術を身につければ、専門家じゃ無くてもカッコいい企画書を作ることは出来るんです。 デザインを良くすれば、綺麗なだけでなく、内容も分かりやすく伝える事が出来ます【スキル１】文章デザインの４原則で、キレイ…

Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち…

昨日フッター30紹介したばかりだけどまたよさげなまとめが発掘されたのでクリップ。制作時に悩んだら見てみてください。 25 Creative Examples of Footer in Web Designスポンサードリンク 関連エントリー クリエイティブなフッターデザイン30 イラストを活…

Firefoxに追加できるカラーピッカーアドオン。表示しているWebページ上の色を取得し、クリップボードにコピーします。rgb(R, G, B) / rgb(R%, G%, B%) / #RRGGBB / RRGGBB の中からコピーする情報を選択できるほか、hsl(H, S, L) / R:255, G:255, B:255 形式…

ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは？ 2.文章のブロック・段落 3.行間 4.余白 5.テンポ…

Design Inspiration: Yellow Websites | Vandelay Design Blog 黄色をメインにしているWebサイト

Appleから学ぶウェブデザインに役立つ10のチップス | コリス #1: Simple Is Better #2: 商品写真の使い方 #3: コントラストを効果的に #4: 簡単に妥協しない #5: Flashから離れる #6: フレンドリーに #7: グリッドの活用 #8: Learn moreコンテンツ #9: 一貫…