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

Browse By

Tag Archives: WebDesign

[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的デザインと言われるサイトの多くはどれも似通っていて、少し前なら目新しく映ったものも最近では退屈に見える場合もしばしば。まるで無菌ルームで作られたかのような似通ったクローンデザイン、そうしたデザイニングを打破するための参考になるサイトがいくつか紹介されてます。リンク先のサイトをまだ全部見たワケじゃないけど、多くは汚れやレトロなテクスチャ等を生かしたデザイニング。こういうのって難しいんだよね。けど参考になる意見でもあるので、早速ブックマークのネタ帳フォルダに入れておきました。

[WEB DESIGN] RoundPic – 画像の四隅を丸くしてくれるサイト

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

画像をアップロードすることで、四隅を丸くしてくれるジェネレーター。ローカルにあるファイルを指定する方法と、すでにオンラインの画像のURLを指定する方法の2種類があります。画像の指定後は、プレビュー画面を見ながら角丸のラウンド径を変更したり、画像のサイズ、また背景色などを自由に変更できます。フォトショップ等の画像加工ソフトを持ってない場合などに便利ですね。

[WEB APPLICATION] VectorMagic – ビットマップ画像をベクター画像に変換してくれるサイト

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

ビットマップ画像をベクター画像に変換してくれるウェブアプリ。ベクター情報になると拡大や縮小に強くなり、印刷用途に利用する機会も増えるので何かと便利です。変換の手順としては、まずはベクター画像に変換したいビットマップ画像を用意します。URL指定はできないので、ローカル環境に保存しておく事が必要です。その画像をファイル指定してアップロードすると、画像が写真なのかロゴなのかを聞かれます。基本的には自動判別してくれるので、違った場合だけ再指定してやればオッケ。写真ならベクター化の精度の選択画面に、ロゴの場合はアンチエイリアスが有りなのか無しなのかを聞かれ、その後色数と精度について聞かれます。時間がかかってもイイ場合は精度High指定にした方がキレイに出力されます。ただし結構待たされますのでタバコ1本くらい吸えます。各種指定が完了すると、ベクター情報に変換された画像がプレビューされるので、その内容でオッケーならば画像ファイルをダウンロードしましょう。フォーマットはEPS, SVG, PNGの3種類。PNGはベクターではなく、アルファチャンネルのあるビットマップ画像です。手元にベクターデータがなくて、ビットマップがある場合などに便利ですね。実際小規模案件ではこういう事って結構あるんだよね・・・。まぁそんな感じでお困りの際などにひとつ。

[WEB DESIGN] Pagination Gallery: Examples And Good Practices – ××ページ目、というナビゲーションの例

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

ブログや掲示板、フォトギャラリー等でよくある「今××ページ目」というページ遷移のナビゲーション。それらの好例を集めた記事。CMSのカラんだサイト製作等で使う機会が多いので、こういうまとめ記事は助かるなー。ナビゲーションどうしよっかなーって時にチラっと見るとイイかもしんない。

[WEB DESIGN] Tartan Background pattern generator – タータンチェックの背景ジェネレーター

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

Web用の素材として使う事のできる、タータンチェックのジェネレーター。3種類の帯それぞれの太さ・色を決め、チェックの方向を縦と斜めから選んだら、右側に出てるプレビュー内の「make it!」をクリックしてプレビュー。気に入った柄が出来たらその下にあるDownloadボタンを押して完了。PNGファイルがダウンロードされます。こういう既存の柄って、いざ必要な時に「あれ、どうやって作るんだっけか」って事が多いので、そんな時に便利なジェネレーター。