ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 | バニデザノート
Fireworksで、微妙な色の調整をするときに 毎回パレットをぐりぐりするのが面倒で、なにかいい方法はないかと調べたら 「ブレンダー」というパネルがあるようです。 今回はこの「ブレンダー」を紹介いたします。 Fireworksでは、ツールの色ボタンを選択するとwebカラーのパレットが開いて そこからもう少しくわしい「カラー」パネルにすすむことができます。 だいたいはwebカラーのパレットであたりをつけたあと、 この「カラー」パネルの横のバーで 明度を上げ下げすれば「すこしあかるく」「すこし暗く」みたいな 色調整が可能なのですが オレンジ系統の色など、中間色に関しては、 上記のように明度を上げられず、「もっと明るく」ができない場合があります。 こういった場合は直接真ん中の丸いグラデーションのポインタを 黄色側か、白側に動かすのですが、なかなかうまく色がでない。 赤によりすぎたり、黄色になり
[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ | バニデザノート
photoshopでドットのラインを描く方法をまとめてみます。 さいごに、配布ブラシもあります。 Fireworksなら、線を描いて、プロパティーから「ストロークを編集」とすると きれいなドットラインが描けるのですが photoshopではそういった機能がないんですね。 ドットラインを描くにはどうしたらいいのか探してみたら、みなさん色々な方法で やってましたので、その方法をご紹介。 ブラシを使う（１）- 間隔設定を使う ブラシ設定の「間隔」という設定を100%以上にすると破線になります。 %設定は、割り切れる数字とか、キレイな数字のほうがうまくいく気がします。 参考：http://www.dougamanual.com/blog/247/1430/e6849.html ブラシを使う（２）- 登録されたブラシ 小さい四角形をつくって、その中に一つの「-」を描き、「ブラシを定義」し 上記と同様
フリーランスで仕事をしている際に使っているメモ・アラート・ユーティリティアプリいろいろ | バニデザノート
フリーランスで仕事をしている際に使っている メモアプリなどをはじめとしたユーティリティアプリを まとめてみます。 主にmac,iphone,ipad,ウェブアプリになります。 クラウドっぽく使っているもの（すべてのデバイス共有） Evernote / アイデアメモとして。ipadの7notesなどで書かれたデータも最終的にはここへ。 Basecamp / プロジェクトごとのスケジュール管理。指示管理。自分用なので共有機能はつかってない。 Dropbox / データバックアップとして。重たいデータの受け渡しサーバーとして。 Macで主に使っているもの Alarms / 予定の時間になるとgrowlと音でお知らせしてくれる。集中しているときに便利。 iCal / mac純正だけどipad,iphone,googlecalと繋いでいるのでべんり。 Thunderbird / メール管理アプリ。複
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
可変グリッドで斜めなアイデアが素敵なサイト「ARNAUD BEEN」 | バニデザノート
フリーランスのグラフィックデザイナーさんのポートフォリオサイトなのですが、 TOPのレイアウトが斜めグリッドになっていて、 なんと可変。 じつはこれ、四角く切った画像のなかで、背景の色を斜めにマスクして並べているという アイデアの詰まったウェブサイトになっています。 蓋を開けてみれば簡単ですが、どきっとさせれるようなこういった仕掛けは 難しい技術を使わなくてもできるんですよね。 各ポートフォリオページでも、斜めの表現が味をだしています。 ここは、背景として配置しているようです。 頭を柔らかくして、自分のできる技術で トリッキーなことをしてみるのも楽しいと思わせてくれるサイトでした。 ぜひ、ご覧下さい。 ARNAUD BEELEN http://www.arnaudbeelen.be/ 関連記事 フリーで使える！企業サイトでよく見かける、新しいウィンドウを示す「新窓」アイコン 2011/11
スクロール制御系のjqueryプラグイン「Jquery Waypoints」 | バニデザノート
主要な動きは４つ。 ・[ Infinite Scroll ] 永遠にスクロールしてくれる （先頭の要素をもう一度読み込んでくるくる回転しているようにみえる） ・[ Sticky Elements ] 一部のエレメントだけ、スクロールしても動かなくする ・[ Scroll Analytics ] スクロールした任意のポイントで、ページビューカウント ・[ Dial Controls ] ダイアル状の要素をスクロールさせると、他の要素が変化する ダウンロード＆解説はこちら Jquery Waypoints ご参考にどうぞ。 関連記事 やさしい時間と音楽の流れるサイト「hanging up the moon」 2011/11/09 完成度の高いフリーのアイコンセット「iconSweets2」 2011/11/08 可変グリッドで斜めなアイデアが素敵なサイト「ARNAUD BEEN」 2011/1
アコーディオン、ロールオーバーなどjQueryでウェブデザインを便利にする機能を一元管理できる「simplelib」 | バニデザノート
現在は、以下のようなプラグインをサポートしているようです。 accordion シンプルなアコーディオンナビゲーション button マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える checkAll チェックボックスの一括選択 fixHeight 要素の高さを揃える ie6PngFix Internet Explorer 6でも透過PNGを使えるようにする ie6PositionFixed nternet Explorer 6でもCSSの position:fixed を使えるようにする imgSwap a要素をクリックして、既存のimg要素の画像を切り替える lightBox jQuery lightBoxプラグインを読み込む overlayOthers 指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指
デザインのアクセントになりそうな無料手書きフォントを集めました | バニデザノート
デザインのアクセントになりそうな手書きフォントを集めてみました。 無料DL可能となっておりますが、 ライセンスなどは各フォントの詳細を御覧ください。 手書きフォント アームド・レモン 漢字もOKな無料手書きフォントの中ではバランスがよいフォントだと思います。 Sweetly Broken Halo Handletter Dear Joe 5 Casual Jellyka CuttyCupcakes Jellyka - le Grand Saut Celine Dion Handwriting 手書きフォントは、こんなふうに使うとかわいいです。 today is ひとこと日記アプリのtoday is にて、アクセントに使われています。 viera RB3シリーズが導く私らしいリラックスタイム タイトルを手書き風に。 リラックス感が表現されています。 ベーシックなフォントで見慣れたあとは ゆる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
