Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: WebDesign

[JAVASCRIPT] mooSlidebox3 – lightboxとはちょっと違うコンテンツの見せ方

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

lightboxに近いコンテンツの見せ方なんだけど、出てくる場所やエフェクトがちょっと違うというJavascript。下からニュイっと出てくるので、例えばブログのナビゲーション類をここに集約させるとか、サイト内の特定のコンテンツの詳細説明を出すとか、そんな感じの使い方ができそう。ただ高解像度のディスプレイを使っている人の多くは画面上部にポインタ位置が集中するので、不便という見方もできます。サイト下部の“Sample”から動作確認ができます。必要に応じて使ってみたいJS。っていうかそろそろlightbox系のJSのまとめ記事でも作ろうかな。

[PHOTOSHOP] getbrushes.com – フォトショップ用のブラシ配布サイト

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

フォトショップで使える、ブラシ定義ファイルの配布サイト。気に入ったブラシがあればダウンロードすることができます。各ブラシ定義ファイルはサイト内に格納されているわけではなく、配布元へのリンクが張ってあるという形なので、配布元を探して他にも色々ダウンロードできたりします。汚しやリピートオブジェクトのあるデザイニングをする際に、ブラシって結構使うんですよね。自分もいくつか頂いておきました。

[CSS] CSS Type Set – テキスト関係のCSSのジェネレーター

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

テキスト関係のCSSを、分かりやすいインターフェースで生成してくれるジェネレーター。左の入力欄にサンプルテキストを放り込んで、入力欄下部にある各種項目を指定するだけで、ページ右側にCSS記述を生成してくれます。この手のサイトっていくつかあるけど、ロードレスであること、スライダーを動かした時に連動するサンプルテキストの動き、マック環境でも変な動きをしないカラーパレット等、かなり使いやすい印象。特に“line-height”、“letter-spacing”、“word-spacing”の指定方法が秀逸。サイト内のpタグの基本指定を作る際に役立ちそうです。といってもフォントの種類に関しては基本的に英語圏でのサンプルしかないので、日本語フォントに関しては自分で指定する必要があります。

[PHOTOSHOP] Spice up your design with 56 Photoshop layer styles – レイヤースタイル詰め合わせ

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

フォトショップで使えるレイヤースタイルの定義ファイルが紹介されてます。なかなかセンスのいいレイヤースタイル56個が大公開。大盤振る舞いですね。Zipファイルでダウンロードできるようになっているので、早速頂きました。ダウンロードして解凍後、.aslファイルをダブルクリックすればフォトショップにインポートされます。アイコンやボタン類などの小物製作に大活躍できそうです。

[PHOTOSHOP] PV-like effect – フォトショップを使って、ティルトレンズを使ったPV風の加工を行うチュートリアル

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

フォトショップを使って、わりとありふれた風景写真をPV風にするというチュートリアル。マスクのかけかた次第では、ティルトレンズ(例えばPC-E NIKKOR 24mm F3.5 D ED等)を使ったような独特のボケ味を出す事もできます。個人的に好きな加工で、手作業が必要な部分の手前まではアクションとして登録してあります。エントリ下部よりアクションファイル(拡張子は“.atn”)もダウンロードできるようにしておきましたので、気に入った方はご自由にお使いください。

(さらに…)

[JAVASCRIPT] FancyZoom – Lightboxっぽい写真の見せ方

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

MT4からWordpressに移行して、「さてLightboxどうしようか」と思ったものの、他の見せ方ってないもんかと思ってたどり着いたのがこのFancyZoom。画像をクリックしてページ内に大きく表示、という目的そのものは一緒なんだけど、なんだかとてもエレガントなんです。1発で気に入ってしまい、早速mBlogにも導入しました。左に表示されているウチのカワイい子のサムネールをクリックすると、ウチのカワイい子の大きい画像が大きく表示されます。とてもカワイいのです。胸毛とか耳のホケホケとか。んで左上のバツボタンをクリックするか、画像そのものをクリックする事で元に戻ります。ここでクローズボタンが左にあるという点もポイント。マックユーザーにとっては右に位置したクローズボタンというのはどうしても違和感があるので。ロード中のアニメーションもMacOSっぽくてナイス。導入も簡単でした。

ただひとつ注意点が。Lightboxやその亜種では、「適用したいリンクに特定の記述を追加」する仕様だったのに対し、こちらは「適用したくない場合だけ特定の記述を追加」という点が大きく違っています。つまりFancyZoom導入後は、回避の記述がない限り画像から画像へのリンクに全て適用される事になります。最初はこの点に関して「うーどうしよう」って迷ったものの、よく考えれば画像から画像へのリンクでこれが適用されて困る事ってないので、導入を決意。実際「回避しない限り全部そうしちゃうよー」という姿勢の方が色々と便利な事が分かりました。

[WEB DESIGN] Simulated Color Blind – 色盲の人の見る世界

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

色の付いた写真やイラストを見た際に、色盲の人にはどのように見えるかというシミュレーション。色盲といってもグレーの世界であるわけではなく、特定の色(例えば青など)は色を認識しやすかったりするようです。ウェブのデザイニングをする際に、全盲の人を対象に画像等にALTを付けたりWeb標準フォーマットで製作する事は一般的ですが、色盲の人を考慮する機会って意外と少ないような気がします。そうした障害を持つ方が、実際どのように見えるのかを知った上でサイトのカラーパレットを作ったり、文字情報を判読しやすいよう背景と比べてハイコントラストな作りにするなどの配慮ができると素晴らしいですね。

[WEB DESIGN] How To Destroy The Web 2.0 Look – Web2.0デザインをぶち壊せ

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

かつてWebのデザイニングが今よりもっと稚拙だった頃、変なバナーや退屈なフレーム構造、ウザったいMIDI等が氾濫していた頃に比べて、今のウェブデザインには光があり、洗練されたとしながらも、「どのサイトもまるでクローン羊のドリーみたいだ」という筆者の意見にはとても深いものがあると思うのです。実際Web2.0的デザインと言われるサイトの多くはどれも似通っていて、少し前なら目新しく映ったものも最近では退屈に見える場合もしばしば。まるで無菌ルームで作られたかのような似通ったクローンデザイン、そうしたデザイニングを打破するための参考になるサイトがいくつか紹介されてます。リンク先のサイトをまだ全部見たワケじゃないけど、多くは汚れやレトロなテクスチャ等を生かしたデザイニング。こういうのって難しいんだよね。けど参考になる意見でもあるので、早速ブックマークのネタ帳フォルダに入れておきました。