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

【自分と比べて安いのか、高いのか。参考になるが、振り回されないようにしなければ】

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

HTML5 では 2011-10-29 の Editor's Draft から time 要素が削除され、data 要素が追加されたようです。この要素が span 要素でダメな理由も、time 要素のときと同様に私にはさっぱり理解できないですが、一応仕様書くらい読んでおくことにします。ED にリン…

ソーシャルメディアマーケティングで常に課題としていわれるのが効果測定。検索広告やアフィリエイトはもちろん、ディスプレイも含めてコンバージョンを指標とした効果測定に慣れ切ってきた（それがどこまで正しいかはともかく）ネットマーケッターにはソー…

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

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

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

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

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

検索や広告を介して、訪問者が最初に訪れるページ（ランディングページ）の設計方法をご紹介いたします。テキスト広告やディスプレイ広告のリンク先ページとして、ご活用いただけると幸いです。 1．動機をつくる（キャッチコピーとビジュアル） 2．アクショ…

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

単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。

“ペルソナは、現実の人間との一連のインタビューから合成された典型的なユーザーの概要である。それぞれのペルソナが、オリジナルの構想や機能リストからビジュアル・インターフェース・デザインに至るまで、製品デザインと戦略を推進するゴールを提供する。”…

jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 便利で広告も無く、見やすく、コードテストに最適なjsfiddleの基本的…

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

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

どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、…

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

case1：画像の場合 case2：テキストが1行の場合 case3：複数行かつ行数が決まっている場合 case4：画像+テキスト1行 case5：画像+テキスト複数行【Evernote Localに全文】

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サイト

Wirify – The web as wireframes 【その場でワイヤーフレーム≒構造・レイアウト・骨格を確認できる】

ホームページ制作者が知っておくべき恐ろしく便利な６２のサービス＋α

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

jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できる◆まだjQueryをマスターしていないのに。

テキストリンクなどのa要素を内包するdiv要素の全部をクリック可能にするjQueryのプラグイン