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

Browse By

Tag Archives: WebDesign

[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ファイルがダウンロードされます。こういう既存の柄って、いざ必要な時に「あれ、どうやって作るんだっけか」って事が多いので、そんな時に便利なジェネレーター。

[WEB DESIGN] CSS レイアウト切り替えスイッチ

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

CSSレイアウトの切替スイッチ。いわゆる2カラムと3カラムの切り替えというものではなく、フローズンレイアウト(横幅固定)、リキッドレイアウト(ブラウザウィンドウに追従)、エラスティックレイアウト(文字サイズのサイズ切り替えにレイアウトも連動)の3種を切り替えるという点で新しいと思います。サイトの作り手としてはフローズンレイアウト(ソリッドって言うのが普通なのかな?)の方が作りやすいんだけど、横幅可変の方が見やすいという人もいれば、最近流行りのエラスティックレイアウトが理にかなってるという意見もあるでしょう。だからまぁそのへんは見る人で切り替えちゃってくださいという感じで、親切な機能ですね。その内使おうと思い備忘録。

[WEB DESIGN] OpenWebGraphics – アイコン、背景、バナーなどの素材集

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

ウェブ製作で使われる、アイコンや背景、バナーなどの素材集を配布しているサイト。アイコンや背景画像はわりとよくあるけど、バナーの素材っていうのは珍しいかも。どこかで見たような気もするアイコン類が、一番充実しているようです。