MIGI PLANNING » etc… http://m-pl.jp Just another WordPress weblog Wed, 01 Feb 2012 15:54:22 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 エラーページもグラフィカルに表現「30 Interesting 404 Pages」 http://m-pl.jp/2011/07/12/%e3%82%a8%e3%83%a9%e3%83%bc%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%82%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%82%ab%e3%83%ab%e3%81%ab%e8%a1%a8%e7%8f%be%e3%80%8c30-interesting-404-pages%e3%80%8d/ http://m-pl.jp/2011/07/12/%e3%82%a8%e3%83%a9%e3%83%bc%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%82%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%82%ab%e3%83%ab%e3%81%ab%e8%a1%a8%e7%8f%be%e3%80%8c30-interesting-404-pages%e3%80%8d/#comments Mon, 11 Jul 2011 23:25:37 +0000 migi http://m-pl.jp/?p=662 http://design-develop.net/web-design/30-interesting-404-pages.html

 

webページが表示されない時に変わりに画面に登場する「404 error」。文字だけの味気ないタイプのものが一般的ですが、今回は「404 error」をグラフィカルに表現したwebデザインページ集「30 Interesting 404 Pages」を紹介したいと思います。


（Error?| ?Brandstack）

一目見たら忘れられない、個性的なデザインの「404 error」ページが多数紹介されています。気になったデザインをいくつかピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

 

■Dailymotion Cloud ? Page not found
雲のイラストが広がるバックグラウンドと、サイン風にデザインされた「404 page not found」が目を惹く、シンプルでありながらもインパクトのある作品です。

■Nothing found for 404notfound
オリジナルのキャラクターを活用。タイポグラフィもミックスしたPOPなデザインが特徴です。

■Apadeloup, le portfolio de Jérémy Viallard | Erreur 404
月を「0」に見立てています。幻想的な雰囲気によって「404 error」でありながらも落ち着いた気持ちにさせてくれそうです。

「404 error」ばかりを強調するのではなく、グラフィックの中に上手く取り込みデザインすることで、とても魅力的なページを作り上げることができるのではないでしょうか。「404 error」ページを作成する際には是非参考にしてみてください。

30 Interesting 404 Pages ? Web Design Blog ? DesignM.ag

 

]]> http://m-pl.jp/2011/07/12/%e3%82%a8%e3%83%a9%e3%83%bc%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%82%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%82%ab%e3%83%ab%e3%81%ab%e8%a1%a8%e7%8f%be%e3%80%8c30-interesting-404-pages%e3%80%8d/feed/ 0 手軽にHTML Emailを作成できるフリーテンプレート集「25 Free HTML Email Templates」 http://m-pl.jp/2011/06/16/%e6%89%8b%e8%bb%bd%e3%81%abhtml-email%e3%82%92%e4%bd%9c%e6%88%90%e3%81%a7%e3%81%8d%e3%82%8b%e3%83%95%e3%83%aa%e3%83%bc%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e3%80%8c25-free-ht/ http://m-pl.jp/2011/06/16/%e6%89%8b%e8%bb%bd%e3%81%abhtml-email%e3%82%92%e4%bd%9c%e6%88%90%e3%81%a7%e3%81%8d%e3%82%8b%e3%83%95%e3%83%aa%e3%83%bc%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e3%80%8c25-free-ht/#comments Wed, 15 Jun 2011 23:23:48 +0000 migi http://m-pl.jp/?p=653 http://design-develop.net/design/25-free-html-email-templates.html

 

読んでもらえる、魅せるメールマガジンを目指すため、HTMLを利用したテンプレートを利用している方も多いはず。しかしHTML Emailを作成するには、時間と手間が掛かります。そこで今回紹介するのは、効率的にHTML Emailを作成するためのHTML Emailテンプレートを集めた「25 Free HTML Email Templates」です。


100+ free HTML email templates | Campaign Monitor

シンプルなレイアウトから、イラストを利用したポップなテイストまで、さまざまなテンプレートが豊富に紹介されています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

 

■100+ free HTML email templates | Campaign Monitor
イラストなどのモチーフを使いポップなデザイン性を取り入れながらも、クールさを感じるデザイン。男性向けのメールマガジンにぴったりです。

■100+ free HTML email templates | Campaign Monitor
テクスチャ感がありながらも、シンプルなテイストを保ったデザイン。さまざまな内容のメールマガジンに利用することができそうです。

■newsletter-template | CakeMail
グラフックを効果的に取り入れた、デザイン感のあるテンプレート。若い層向けのメールマガジンに最適ではないでしょうか？

デザイン性の高いデザインばかりなので、クオリティの高いメールマガジンを作成することができそうです。たくさんの人を魅了できるようなメールマガジンを目指している方は是非チェックしてみてください。

25 Completely Free HTML Email Templates

 

]]> http://m-pl.jp/2011/06/16/%e6%89%8b%e8%bb%bd%e3%81%abhtml-email%e3%82%92%e4%bd%9c%e6%88%90%e3%81%a7%e3%81%8d%e3%82%8b%e3%83%95%e3%83%aa%e3%83%bc%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e3%80%8c25-free-ht/feed/ 0 HTMLメールのデザインテンプレート集「Free HTML Newsletter Templates」 http://m-pl.jp/2011/04/04/html%e3%83%a1%e3%83%bc%e3%83%ab%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e3%80%8cfree-html-newsletter-templates%e3%80%8d/ http://m-pl.jp/2011/04/04/html%e3%83%a1%e3%83%bc%e3%83%ab%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e3%80%8cfree-html-newsletter-templates%e3%80%8d/#comments Mon, 04 Apr 2011 02:55:32 +0000 migi http://m-pl.jp/?p=584 http://design-develop.net/design/free-html-newsletter-templates.html

 

デザインが施された内容のメールは、通常のメールよりも目を惹き、内容への注目度を高めてくれる効果があると思います。そこで今回紹介するのは、HTMLメールのデザインテンプレート集「Free HTML Newsletter Templates」です。


（100+ free HTML email templates | Campaign Monitor）

さまざまなテイストのテンプレートが多数収録されており、好みや目的に合わせて使い分けることができそうです。中でも気になったタイプのテンプレートをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

 

■HTML Email Templates | MailChimp
HTMLメールのレイアウトを多数収録した便利なテンプレート。内容によって組み合わせができるのが魅力ですね。

■100+ free HTML email templates | Campaign Monitor
ビビットなカラーリングと、アイコン、インパクトのある文字の使い方が印象的なテンプレート。

■clouds_full_1col.jpeg
さわやかな空の背景が相手の心を癒してくれます。いろいろなシーンで活用することができそうです。

メールで相手にメッセージや仕事関連の連絡、ユーザーへのメールマガジンなどを届けることが当たり前の現代にとって、このテンプレート集はとても重宝するのではないでしょうか。是非好みの一枚を見つけてみてください。他にもたくさんのテンプレートが紹介されていますので、気になる方は下記よりご覧ください。

Free HTML Newsletter Templates ? Noupe Design Blog

 

]]> http://m-pl.jp/2011/04/04/html%e3%83%a1%e3%83%bc%e3%83%ab%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e3%80%8cfree-html-newsletter-templates%e3%80%8d/feed/ 0 エンボスなど特殊加工した名刺デザインを集めた「Showcase of 47 Letterpress Business Card For Inspiration」 http://m-pl.jp/2010/12/06/%e3%82%a8%e3%83%b3%e3%83%9c%e3%82%b9%e3%81%aa%e3%81%a9%e7%89%b9%e6%ae%8a%e5%8a%a0%e5%b7%a5%e3%81%97%e3%81%9f%e5%90%8d%e5%88%ba%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f/ http://m-pl.jp/2010/12/06/%e3%82%a8%e3%83%b3%e3%83%9c%e3%82%b9%e3%81%aa%e3%81%a9%e7%89%b9%e6%ae%8a%e5%8a%a0%e5%b7%a5%e3%81%97%e3%81%9f%e5%90%8d%e5%88%ba%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f/#comments Mon, 06 Dec 2010 06:48:56 +0000 migi http://m-pl.jp/?p=534 http://design-develop.net/web/showcase-of-47-letterpress-business-card-for-inspiration.html

ビジネスシーンに欠かす事ができない名刺、情報を的確に伝えることはもちろん、渡した相手にインパクトを与えるデザインもとても重要な要素の一つです。そこで今回は、エンボスなど特殊加工した名刺デザインを集めた「Showcase of 47 Letterpress Business Card For Inspiration」を紹介したいと思います。


（Branded Business Cards | Business Cards Observer）

凹凸のある特殊加工・エンボス加工を利用しデザインされた名刺を中心に、さまざまな種類のデザイン名刺が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

■Edged Color Business Card | Business Cards Observer
文字を大きく、大胆に入れた名刺デザイン。エッジがイエローでカラーリングされているのも特徴です。

■3 Keys Business Card | Business Cards Observer
キーボードをモチーフとした個性的なデザイン名刺。味のある質感が印象的です。

■Impression DP | Business Cards Observer
シンプルで綺麗めなデザインの名刺。マークをエンボス加工で入れることでアクセントにしています。

加工を施すことでデザインの質をより高めることができます。制作の際には是非参考にしてみたいですね。他にもさまざまな種類の名刺デザインが公開されていましたので、気になる方は下記リンクよりどうぞ。

Showcase of 47 Letterpress Business Card For Inspiration

]]> http://m-pl.jp/2010/12/06/%e3%82%a8%e3%83%b3%e3%83%9c%e3%82%b9%e3%81%aa%e3%81%a9%e7%89%b9%e6%ae%8a%e5%8a%a0%e5%b7%a5%e3%81%97%e3%81%9f%e5%90%8d%e5%88%ba%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f/feed/ 0 すごいテキストエフェクトのPhotoshop/Illustratorチュートリアル100個まとめ 2010年10月度 http://m-pl.jp/2010/11/01/%e3%81%99%e3%81%94%e3%81%84%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%81%aephotoshopillustrator%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2/ http://m-pl.jp/2010/11/01/%e3%81%99%e3%81%94%e3%81%84%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%81%aephotoshopillustrator%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2/#comments Mon, 01 Nov 2010 05:34:12 +0000 migi http://m-pl.jp/?p=523 http://photoshopvip.net/archives/20260

海外デザインブログDesignrfixで、最近公開されたテキストエフェクトのデザインチュートリアルを100個まとめたエントリー「100 Creative Photoshop Text Effects Tutorials」が公開されていたので、今回はご紹介します。

PhotoshopやIllustratorをはじめたばかりの方にもオススメの簡単テクニックから、じっくり時間をかけてデザインする高品質テキストエフェクトチュートリアルなどさまざまなジャンルのチュートリアルがまとめられています。

お気に入りのテキストエフェクトを見つけてはいかがでしょう。

詳細は以下から。

クリエイティブなテキストエフェクト用チュートリアルまとめ

Photoshopチュートリアル

人の皮膚テクスチャを利用したユニークなテキストエフェクトの作り方

あらかじめ用意しておいたテクスチャ素材を重ねるだけでデザインするお手軽チュートリアルのひとつ。

背景デザインの作り方なども参考になるかもしれません。

ツルツルとした光沢感のあるグラフィックテキストエフェクトの作り方

手描きでデザインしたグラフィックデザインを立体的に加工、編集する方法をステップごとに紹介しているチュートリアル。

立体的なゴシック風タイポグラフィーデザインの作り方

ロゴデザインの制作などにも利用することができる立体的な重なり方が魅力的なテキストエフェクトチュートリアル。

お好みのフォントを利用することでオリジナルデザインとしても応用することができるのではないしょうか。

立体的な３Dグランジテキストエフェクトをデザインする方法

3D編集ツールなどを使わずにphotoshopだけで立体的なテキストエフェクトを完成させるチュートリアル。

チュートリアル後半のタイポグラフィの質感を高めるテクニックは個人的にメモとしてエントリー。

映画「インセプション」風ポスターデザインをPhotoshop CS5でつくる方法

CS5の新機能Repousseエフェクトを利用することで、タイポグラフィーを使ったダークな街並みを表現しています。

Photoshop CS5新機能「パペット」ツールを使ってロープで文字を描く方法

一本のロープを使い、ユニークな筆記体タイポグラフィーをデザインするチュートリアルで、新機能「パペット」ツールの基本的な使い方を学ぶことができそうです。

立体的なロゴが魅力的なアブストラクトデザインをつくる方法

Photoshopの便利なブラシツールを利用することで、簡単にアブストラクトなデザインを完成させることができるチュートリアル。

コンクリートの背景にメタルテキストエフェクトをデザインする方法

レイヤースタイルを適用するだけの簡単テキストエフェクトはもちろん、背景に利用している質感の高いコンクリートテクスチャをPhotoshopでデザイン可能。

これは個人的に覚えておきたいテクニックだったのでメモとして。

キラキラに輝くメタリック文字についてはこちらのチュートリアルを参考にしてみてはいかがでしょう。

カラフルなグランジタイポグラフィーをデザインする方法

あらかじめIllustratorを使ってデザインされた、タイポグラフィーデザインに汚れた質感のポスターデザインに仕上げる方法が紹介されています。

光沢感たっぷりな立体的ロゴデザインを作成する方法

Photoshop CS5の新機能Rapousseツールを利用して、メタリックな質感を表現した立体的なテキストエフェクトを完成させることができます。

カラフルに輝くクリエイティブなタイポグラフィーをデザインする方法

現在閲覧不可の状態になっていますが、ユニークなデザイン方法で作成されたカラフルテキストエフェクトの作り方が紹介されています。

Illustratorチュートリアル

本物そっくりに輝くクロムロゴデザインを作成する方法

通常表現しにくい光の反射の簡単な作成方法を紹介しているお手軽チュートリアルのひとつ。

木材を切り抜いたようなテキストエフェクトの作り方

あらかじめフォントとテクスチャ素材を用意しておくことで、本物そっくりの質感を表現したテキストエフェクトを完成させることができます。

飛行場のパネル式搭乗案内ボードを作成する方法

タイトルが分かりにくいかもしれませんが、飛行機のフライト情報を表示した案内ボードのデザインチュートリアル。

お好みの文字に変更することも可能なので、デザインの幅もひろがりそうですね。

タイポグラフィーを使ったミステリアスなポスターデザインの作成方法

タイポグラフィーをカンバス全体に敷き詰めたユニークでクリエイティブなデザインテクニックが紹介されています。

立体的な銀色クロムテキストをデザインする方法

Photoshopだけではデザインが難しい3DタイポグラフィーもIllustratorを利用することで比較的簡単に再現することができます。

暗闇に輝くネオンサインをデザインする方法

以前こちらのエントリーでPhotoshopを使ったネオンサインの作り方についてはご紹介していますが、こちらはイラスト調ネオンサインの作成方法がまとめられています。

カラフルなベクタータイポグラフィーをデザインする方法

こちらは作り方だけでなく、Illustratorを使ってタイポグラフィーデザインを行うときのプロセスも詳しく解説されています。

英語表記となりますが、解説用サムネイル画像を多く比較的わかりやすいかもしれません。

血がしたたるテキストエフェクトをデザインする方法

タイポグラフィーから血が流れているようなリアルな質感を表現したデザインチュートリアルのひとつ。

緩やかな曲線を利用したクールなタイポグラフィーのデザイン方法

Illustratorのブレンドツールを利用し、淡いグラデーションが美しいテキストエフェクトの作り方を解説しています。

厚みのある立体的なテキストエフェクトをデザインする方法

斜め横から見上げたような立体的なタイポグラフィーデザインの作り方を紹介したチュートリアル。

モダンでエレガントな3Dテキストエフェクトをデザインする方法

こちらも立体タイポグラフィーデザインのひとつですが、ミニマルなデザインにあわせやすいシンプルなデザインが魅力となっています。

こちらからサンプル用ファイルがダウンロード可能。

カラフルでクリエイティブなテキストエフェクトをデザインする方法

ハーフトーンなどを利用することで立体的な数字「5」をデザインしているテキストエフェクト用チュートリアルのひとつ。

ペンタブレットを使ったタイポグラフィーをベクターデザインで完成させる方法

利用されている方もいらっしゃると思いますが、ペンタブレットを使って細かい部分までデザインしたベクタータイポグラフィーの作り方を紹介しています。

[参照元 :? 100 Creative Photoshop Text Effects Tutorials - Designrfix]

]]> http://m-pl.jp/2010/11/01/%e3%81%99%e3%81%94%e3%81%84%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%81%aephotoshopillustrator%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2/feed/ 0 ダーク系の色合いのサイトを集めた「35+ Fresh Showcase of The Dark Side of Web Design」 http://m-pl.jp/2010/10/20/%e3%83%80%e3%83%bc%e3%82%af%e7%b3%bb%e3%81%ae%e8%89%b2%e5%90%88%e3%81%84%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8c35-fresh-showcase-of-the-dark-side-of-web-desi/ http://m-pl.jp/2010/10/20/%e3%83%80%e3%83%bc%e3%82%af%e7%b3%bb%e3%81%ae%e8%89%b2%e5%90%88%e3%81%84%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8c35-fresh-showcase-of-the-dark-side-of-web-desi/#comments Wed, 20 Oct 2010 13:55:25 +0000 migi http://m-pl.jp/?p=515 http://design-develop.net/design/35-fresh-showcase-of-the-dark-side-of-web-design.html

カラーリングによって印象が異なるウェブデザインですが、作品を目立たせることを目的としたポートフォリオサイトや、クールな雰囲気にまとめたい時 のサイトデザインにおすすめしたい「35+ Fresh Showcase of The Dark Side of Web Design」を今回は紹介したいと思います。


135design | web design e programmazione | Roma

ブラックやグレー系のダークトーンカラーうを貴重としたサイトが収録されており、その中でもさまざまなテイストのデザインバリエーションが展開されています。気になったものをいくつかピックアップしましたので、下記よりどうぞ。

■Webdesigner & Usability Freak ? Simon Guérin Webdesigner from Montreal, Quebec
タイポグラフィ、そして差し色を使ってレイアウトした個性的なデザイン。貴重が黒なので、文字がとてもよく映えます。

■SkyLedger | Dead Simple Accounting, Dead Simple Bookkeeping, Perfect For Small Businesses With Partners
非常にシンプルなタイプのサイト。アレンジがしやすいので、さまざまなサイトデザインの参考となりそうです。

■Every Pixel Counts | EPIC ? Creative agency
クールな印象が強いサイトです。フォントのレイアウトや使用されているアイコンのチョイスもいいですね。

webのデザイン制作をする際のベースデザインの参考として活躍してくれそうです。他にもたくさんのサイトが紹介されており、見ているだけでも刺激になりますので、気になる方はチェックしてみてください。

35+ Fresh Showcase of The Dark Side of Web Design ? tripwire magazine

]]> http://m-pl.jp/2010/10/20/%e3%83%80%e3%83%bc%e3%82%af%e7%b3%bb%e3%81%ae%e8%89%b2%e5%90%88%e3%81%84%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8c35-fresh-showcase-of-the-dark-side-of-web-desi/feed/ 0 フリーで利用できる音楽&演出素材集「Free Music & Sound Effects」 http://m-pl.jp/2010/09/24/%e3%83%95%e3%83%aa%e3%83%bc%e3%81%a7%e5%88%a9%e7%94%a8%e3%81%a7%e3%81%8d%e3%82%8b%e9%9f%b3%e6%a5%bd%e6%bc%94%e5%87%ba%e7%b4%a0%e6%9d%90%e9%9b%86%e3%80%8cfree-music-sound-effects%e3%80%8d/ http://m-pl.jp/2010/09/24/%e3%83%95%e3%83%aa%e3%83%bc%e3%81%a7%e5%88%a9%e7%94%a8%e3%81%a7%e3%81%8d%e3%82%8b%e9%9f%b3%e6%a5%bd%e6%bc%94%e5%87%ba%e7%b4%a0%e6%9d%90%e9%9b%86%e3%80%8cfree-music-sound-effects%e3%80%8d/#comments Fri, 24 Sep 2010 03:09:15 +0000 migi http://m-pl.jp/?p=489 http://design-develop.net/design/free-music-sound-effects.html

臨場感や雰囲気をより作ってくれる音楽。シーンにはまれば、どうということ無い動画も世界観をより感じさせるものになりますが、なかなか自分で作るのは敷居が高い。今日紹介するのは音が作れないというかたのために、フリーで利用できる音楽&演出素材を集めたサイト「Free Music & Sound Effects」です。

様々なバックグラウンドミュージックやサウンドエフェクトが公開されています。いくつか動画に併せてみた音源のサンプルが公開されていましたので下記にいくつか紹介したいと思います。

詳しくは以下


上記の他にも様々な音楽から、サウンドエフェクトまで多数の音素材が公開されています。動画を見て、音楽を聞いていただいてもわかるようにかなりクオリティも高いので、音を使ってクリエイティブをする方に取っては良い素材集だとお思います。

音源はすべて無料でダウンロードでき、広告、教育、YouTubeのビデオなど様々なものに利用できるみたいです。

Free Royalty Free Music, Free Sound Effects

]]> http://m-pl.jp/2010/09/24/%e3%83%95%e3%83%aa%e3%83%bc%e3%81%a7%e5%88%a9%e7%94%a8%e3%81%a7%e3%81%8d%e3%82%8b%e9%9f%b3%e6%a5%bd%e6%bc%94%e5%87%ba%e7%b4%a0%e6%9d%90%e9%9b%86%e3%80%8cfree-music-sound-effects%e3%80%8d/feed/ 0 CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」 http://m-pl.jp/2010/09/13/css%e3%80%81javascript%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e3%82%bf%e3%83%96%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%82%a4%e3%82%b9%e9%9b%86%e3%80%8c30-css-and-javascript-tab/ http://m-pl.jp/2010/09/13/css%e3%80%81javascript%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e3%82%bf%e3%83%96%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%82%a4%e3%82%b9%e9%9b%86%e3%80%8c30-css-and-javascript-tab/#comments Mon, 13 Sep 2010 00:52:06 +0000 migi http://m-pl.jp/?p=480 http://design-develop.net/web-design/30-css-and-javascript-tabs-solutions.html

数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。


Sweet Tabbed Navigation Bar using CSS3

デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

■Sweet AJAX Tabs
TABの中身がAJAXでロードされる、タブインターフェイス。ローディングアニメーションも表示されます。

■Animated Tabbed Content (jQuery)
おなじみのスライダーアクションとタブが上手く噛み合ったインターフェイス。

■Slick Tabbed Content Area (jQuery)
コンテンツがアコーディオン形式で切り替わるjQueyを使ったタブインターフェイス。

上記の他にも様々なタブインターフェイスが公開されていました。基本的には同じような構造ですが、それぞれに特性がありますので、構築するサイトや要素によって選択すればより使い勝手の良いサイトになるのではないでしょうか？

30 CSS and Javascript Tabs Solutions :Speckyboy Design Magazine

]]> http://m-pl.jp/2010/09/13/css%e3%80%81javascript%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e3%82%bf%e3%83%96%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%82%a4%e3%82%b9%e9%9b%86%e3%80%8c30-css-and-javascript-tab/feed/ 0 写真上の不要なものを簡単に消去して周りと馴染ませるWEBサービス「Webinpaint」 http://m-pl.jp/2010/08/19/%e5%86%99%e7%9c%9f%e4%b8%8a%e3%81%ae%e4%b8%8d%e8%a6%81%e3%81%aa%e3%82%82%e3%81%ae%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab%e6%b6%88%e5%8e%bb%e3%81%97%e3%81%a6%e5%91%a8%e3%82%8a%e3%81%a8%e9%a6%b4%e6%9f%93/ http://m-pl.jp/2010/08/19/%e5%86%99%e7%9c%9f%e4%b8%8a%e3%81%ae%e4%b8%8d%e8%a6%81%e3%81%aa%e3%82%82%e3%81%ae%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab%e6%b6%88%e5%8e%bb%e3%81%97%e3%81%a6%e5%91%a8%e3%82%8a%e3%81%a8%e9%a6%b4%e6%9f%93/#comments Thu, 19 Aug 2010 08:54:29 +0000 migi http://m-pl.jp/?p=467 http://design-develop.net/web/webinpaint.html

photoshopなど一部高機能な写真レタッチソフトには実装されていますが、今回紹介するのは写真上の不要なものを簡単に消去して周りと馴染ませるWEBサービス「Webinpaint」。

使い方は非常に簡単で、写真の中の消したいものをブラシで、塗りつぶして、Inpaintを押すだけで写真を解析して、周りの風景と違和感がないように修正してくれます。レタッチした例がいくつか公開されていましたので。下記に貼り付けておきます。

詳しくは以下

webinpaint

carpetremove

legoremove

完璧とまではいきませんが、小さな画像で、背景が単色のものならば一見しただけではわからないクオリティです。

ただ消すだけというシンプルなWEBサービスですが、非常に簡単に利用できますので、旧版のphotoshopしか無くて、コピースタンプを使って消していくしかないという状態の時には非常に役立ってくれるWEBサービスだと思います。

Webinpaint

via?Webinpaint is a Poor Man’s Web-Based Content Aware Fill Tool

]]> http://m-pl.jp/2010/08/19/%e5%86%99%e7%9c%9f%e4%b8%8a%e3%81%ae%e4%b8%8d%e8%a6%81%e3%81%aa%e3%82%82%e3%81%ae%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab%e6%b6%88%e5%8e%bb%e3%81%97%e3%81%a6%e5%91%a8%e3%82%8a%e3%81%a8%e9%a6%b4%e6%9f%93/feed/ 0 プレゼンに役立つフリーパワーポイントテンプレート集「345 Free PowerPoint templates, themes and backgrounds」 http://m-pl.jp/2010/07/09/%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e3%81%ab%e5%bd%b9%e7%ab%8b%e3%81%a4%e3%83%95%e3%83%aa%e3%83%bc%e3%83%91%e3%83%af%e3%83%bc%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac/ http://m-pl.jp/2010/07/09/%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e3%81%ab%e5%bd%b9%e7%ab%8b%e3%81%a4%e3%83%95%e3%83%aa%e3%83%bc%e3%83%91%e3%83%af%e3%83%bc%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac/#comments Fri, 09 Jul 2010 11:11:47 +0000 migi http://m-pl.jp/?p=433 http://design-develop.net/design/345-free-powerpoint-templates.html

プレゼンや、企画書など、クリエイター以外にも幅広くビジネスシーンで利用されるプレゼンテーションツール、パワーポイント。今日紹介するのはパワーポイントでの資料作成に便利な、フリーパワーポイントテンプレート集「345 Free PowerPoint templates, themes and backgrounds」です。

テーマは様々で、ビジネステンプレートから、医療業界で使えそうなもの、写真を大胆に使ったものなど様々なテンプレートが収録されており、全部で345個公開されています

詳しくは以下


ウェディングをテーマにしたテンプレート。その他にも様々なテンプレートが公開されています。

海外のサイトなので、国内っぽいデザインのものはありませんが、シンプルなものも多いので。プレゼンテーションや企画書の内容にもよりますが、上手く利用出来るものもあるかと思います。

普段はパワーポイントに慣れていないクリエイターの型などには良い素材だと思います。ダウンロードは各カテゴリー以下のサムネイルの下部のテキストリンクからどうぞ。

345 Free PowerPoint templates, themes and backgrounds

]]> http://m-pl.jp/2010/07/09/%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e3%81%ab%e5%bd%b9%e7%ab%8b%e3%81%a4%e3%83%95%e3%83%aa%e3%83%bc%e3%83%91%e3%83%af%e3%83%bc%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac/feed/ 0