使わなにゃ損！記号フォントで作るWeb素材 (1/2)
アイコンやバナーなど、Webサイトのデザインにちょっとしたイラストを使いたいけれど、絵はまったく描けない。かといって、他人に頼んで描いてもらうほどでもないし……。そんな困ったときには、記号フォントを試してみてはどうだろうか？ 記号フォントとは、通常アルファベットなどの文字が割り当てられている文字コードに、記号や絵文字を割り当ててある特殊なフォントで、Windowsの場合は「Wingdings 1」「Wingdings 2」「Wingdings 3」「Webdings」が標準で付属している。いずれも身の回りのものをモチーフにしたイラストが収録されているので、うまく使えればネット上でフリーアイコンやイラストを探すよりも手っとり早い。今回は、Illustratorでの使い方と簡単なTipsを紹介しよう（以降の操作説明は、Illustrator CS4を前提としています）。 必要なときにすぐ使うた
jQueryアニメ＆エフェクト合わせ技で画像を拡大
コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション／エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト：『Contreforme』 企業のCI策定やグラフィックデザイン、Web
Googleマップ初歩の初歩！静的地図を組み込もう (1/5)
「ホームページに地図を載せたい」――そんなとき、10年前ならIllustratorやPhotoshopを使って一生懸命地図を作ったかもしれません。でも今は違います。Googleマップがあります。 グーグルがGoogleマップのAPIを公開し、外部から利用しやすくしたことで、個人サイトから企業サイトまで、地図は作るのではなく“使う”のが当たり前になりました。同時に、Googleマップを使ったさまざまなオンラインサービスも広がり、Googleマップはすっかり見慣れたものになっています。 カカクコムが運営する「食べログ」もGoogleマップを活用しているサイトのひとつ。飲食店のレビュー情報を共有するCGM（Consumer Generated Media）サイトである食べログでは、Googleマップを使って飲食店の位置情報をユーザーに分かりやすく伝えています。今回は、食べログの手法を参考に、Go
ASCII.jp：驚きのExcel 超早技ベスト15 これは便利！｜Excel達人の新定番テク60 知らないあなたは損してる！
マンネリ化した方法でExcelを使っていないでしょうか。実はもっと簡単で手早くできる技があるのです。使わないなんてもったいない。アナタの知らない「新」Excel技大特集！ 第1回は、手間を省いて操作をすばやく！ 今すぐ役立つ厳選早技15を紹介します。面倒な入力や編集作業をどんどん片づく！ 驚きのExcel 超早業ベスト15――インデックス 技1――表の早技 表の見出しを除いて列幅を自動調整 技2――入力の早技 支店名をいつも決まった順番でオートフィル入力 技3――入力の早技 「＝」の代わりに「＋」キーで式を入力 技4――入力の早技 セルを組み合わせて思いどおりに連続データを入力 技5――入力の早技 ながーい連番を一発入力 技6――編集の早技 ツールバーの［下線］ボタンで二重下線を引く 技7――表の早技 基本の行列入れ替えはボタンで 技8――表の早技 多様な罫線を使った複雑な表は「罫線なし」
jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (1/5)
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
HTMLもCSSも書換不要！気持ちいいスクロール (1/5)
Webサイトを作るにあたって、ネット上でデザインの参考になるサイトを探していると、プロのWebデザイナーのポートフォリオサイトに行き当たることがあります。ポートフォリオサイトはデザイナーにとってのショーケース。気合の入った作りや実験的な要素を盛り込んでいるサイトもあり、単純に眺めても楽しいものです。 今回取り上げるサイト「Cosmive」は、Webデザイナー・Muhammad Uzairさんのポートフォリオサイト。色鮮やかで美しいグラフィックに、JavaScriptによるダイナミックなユーザーインターフェイスを合わせています。今回はこのサイトから参考にさせてもらいましょう。 今回のお手本サイト：『Cosmive』 パキスタン在住のWebデザイナー、Muhammad Uzairさんのポートフォリオサイト。自身のプロフィール、手がけた作品の紹介、問い合わせフォームまで、1ページにコンパクトにま
Web制作に超便利！無料のプロトタイプ作成ツール
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
Webデザインにすぐ使えるPhotoshopグラデ339選
ありきたりのテンプレートではなく、どうせWebサイトを作るならオリジナルのデザインにしたい――そんなときに悩むのが、“色”ではないだろうか。特にヘッダーやフッター、ナビゲーションバーなど、サイトのイメージを決める重要な要素の色使いは、サイト制作者の腕の見せ所だ。 「でも、どうもセンスには自信がないし……」。それなら、Photoshopのグラデーションライブラリを使ってみよう。Photoshopには標準でもかなりの種類のグラデーションが用意されているが、ネット上ではさらに膨大な数のライブラリが配布されている。グラデーションライブラリを使えばあっという間にイメージどおりの色の組み合わせが手に入るし、うまく活用できればサイト全体の完成度もぐっと上がる。 今回は、単純に「上から下に適用するだけ」でも十分カッコいい、シンプルで“使える”グラデーションライブラリをいくつかピックアップしてみた。なお、実
jQueryで作る“Amazon風”インターフェイス (1/5)
「最近、どこでよく買い物していますか？」――こう聞かれて「Amazon！」と答える方も少なくないかもしれません（特に本誌読者であれば）。当初は書店の店頭で入手が難しい書籍の購入などに重宝していたAmazonですが、取扱商品が増えた今では、ペットボトルの水からパソコンまで何でも買える便利なECサイトとして、ネット利用者の生活に定着しました。 もっとも、Webサイトを作る立場から見ると、Amazonの魅力は品揃えやサービスだけではありません。Webサイトのデザイン面からAmazonを見ても優れた点は多数あり、実際、国内外の非常に多くのECサイトがAmazonをお手本にしたUIを採用しています。今回は、「Amazon.co.jp」を参考にさせてもらいましょう。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。現
古いPhotoshopで最新ブラシを使うチュートリアル
Photoshopのカスタムブラシを使えば、Webサイトで使えるカッコいいグラフィックをあっという間に作れる――。先週、「アナログな質感」をテーマにネット上で入手できるいくつかのブラシファイルを紹介したが（関連記事）、「自分の環境では使えなかったぞ！」という読者もいるだろう。というのも、Photoshopのカスタムブラシ（ABRファイル）はバージョンによって異なり、新しいバージョンで古いバージョンのABRファイルは読めても、その逆はできない。たとえば最新のPhotoshop CS3で作成されたABRファイルは一昔前のPhotoshop 6では使用できないのだ。 古いPhotoshopで最新のPhotoshopブラシを使えるようにするにはどうすればよいのか？ 今回はオープンソースソフトを使って手軽に実現する手順を紹介しよう。 そもそもPhotoshopブラシってどうやって作る？ 手順の説明に
Photoshopブラシで質感のあるWebサイトへ (1/2)
昨今のいかにもWeb2.0なWebデザインにはそろそろ食傷気味。他のサイトとは違ったデザインにリニューアルしたい！ そんなとき、簡単に使えるのがPhotoshopのブラシを使う方法だ。Photoshopのブラシを使うと、いくらでも好きなように画像を加工できる。 昔なら自分が作った画像をもとに自分用ブラシを作ってみたりしたものだが、今ではネット上で大量のブラシが配布されているのでその苦労もない。 オススメは、布や紙といった質感をイメージさせるアナログ風のブラシ。パステルカラーのグラデーションを多用したWeb2.0的なデザインの対極にあるアナログ風ブラシを使えば、サイトのヘッダーやフッター、サイドメニューのデザインを変更するだけでもサイト全体の雰囲気は一変する。ネット上に公開されている膨大なブラシの中から、オススメのアナログ風ブラシをいくつか紹介しよう。 Fabric Texture Bru
さらばプルダウン！ 地図で入力できるWebフォーム
ネットショップや会員制サイトを利用する際にいつも面倒だなと感じていることがある。会員登録や配送先を指定するフォーム画面にある、都道府県名の入力欄だ。 よくあるのが、プルダウンで都道府県名を選ぶ形式だが、これはなかなかのストレスだ。5～6項目ならともかく、47もの選択項目、それも似たような漢字3文字の中から、注意深く狙いを定めなければならない。運悪く1日に何度もこの作業が発生するとうんざりする。 そうした、「HTMLフォームでの都道府県名の選択」に特化した新発想のJavaScriptライブラリが登場している。CogniTom Academic Design作の「jsmap」がそれだ。jsmapをHTMLフォームに組み込むと、プルダウンで選択する代わりに、地図をマウスでクリックすることで都道府県名を入力できるようになる。 地図とはいっても、ご覧のようにいい意味でざっくりとしたデザインで、非常に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
