TOP  >  ユーザーインターフェース

Tag : ユーザーインターフェース

2017年02月12日

ダイナミックで洗練された検索ユーザーインターフェイスキット「Inspiration for Search UI Effects」

WEBサイトにおいて、探すインターフェイスは非常に重要で、初めて見るサイト・使い慣れたサイトでもともによく利用するものとなりますが、今回紹介するのはダイナミックで洗練された検索ユーザーインターフェイスキット「Inspiration for Search UI Effects」です。

SearchUIEffects_01

WEBサイトで利用できる様々なユーザーインターフェイスが全部で11まとめられています。全画面でダイナミックにアニメーションするものから。検索コマンドのように事例を見せるユニークなタイプのものまでがまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 11:57  |  
Category: WebService   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2008年09月12日

3Dが学べるphotoshopチュートリアル集「40 Icon Tutorials for Photoshop」

前回「photoshopのアイコンチュートリアルの決定版「40+ Hand-picked Photoshop Icon Designs」」と言う記事でアイコンのチュートリアル集を紹介しましたが、今回紹介するのもアイコンのチュートリアル集「40 Icon Tutorials for Photoshop」。前回と同じく40個のアイコンのチュートリアルが集められています。前回紹介したエントリーと被っているモノもありますが、Wiiリモコン、LG LCD Monitor Iconといったgadget系のアイコンもあり少し毛色が違う感じです。


Wii Controller Icon

今日は紹介されている中で、前回紹介した「40+ Hand-picked Photoshop Icon Designs」と被っていないチュートリアルの中から気になったものをいくつか紹介していきたいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 06:10  |  
Category: Design , Photoshop   
2007年11月30日

AJAXで動くシンプルなfavicon制作サービス「Genfavicon」

以前「仕上がりを見ながらFavicon制作できる「favikon」」と言う記事で、仕上がりを確認しながらFaviconを作成できるWEBサービス「favikon」を紹介しましたが、今回も同じく仕上がりを確認しながらFaviconを制作できるWEBサービス「Genfavicon」を紹介したいと思います。

Genfaviconf

操作する順に連番が振ってあるインターフェイスは「Favikon」と比べると親切かなと思いますが、操作、仕上がりなどは「Favikon」と大差はありません。ひとつ異なる点は、16×16、32×32、48×48、64×64、128×128とトリミングのサイズを選んでトリミング後の画像データを生成したfaviconと共に保存できるようになっているところです。

詳しくは以下

(さらに…)

続きを読む
posted 09:47  |  
Category: WebService   
2008年05月29日

ユーザーのソーシャルサイトを自動判別してアイコン表示する「SocialHistory.js」

最近はソーシャルサイトも増えてきて国内でもかなりの数のサービスが存在します。ソーシャルブックマークサービスを簡単に利用できるように、ソーシャルサイト用のアイコンを並べているブログも当ブログを含めて多いかと思います。

しかし上記のようにあまりにも並びすぎているとあまりにも不格好です。そこで今回紹介するjavascript「SocialHistory.js」はユーザーが利用しているソーシャルサイトを自動的に検出して、必要と思われるアイコンだけ表示させることができるスクリプトです。

詳しくは以下

(さらに…)

続きを読む
posted 07:54  |  
Category: WebDesign   
2013年03月20日

ドット柄パターンの定番として使いやすい「Simple Dots」

パターン素材の中でも、定番の種類として幅広く利用されているドット素材。自身でも制作することはできますが、もっと簡単にバリエーションがあると嬉しいものです。そんな中今回は、ドット柄パターンの定番として使いやすい「Simple Dots」を紹介したいと思います。

可愛らしい配色・印象をドット柄Photoshopパターンが50種収録されています。

詳しくは以下

(さらに…)

続きを読む
posted 06:09  |  
Category: Design , Photoshop   
2018年09月10日

リアルタイムにデザインを編集できるWordPressプラグイン「The Divi Builder」

世界中で利用されているCMSの一つWordpress。国内でも多くのユーザーが利用しており、法人・個人問わず利用されていますが、今回紹介するのは、リアルタイムにデザインを編集できるWordpressプラグイン「The Divi Builder」です。

The-Divi-Builder

通常テーマはいくつかのファイルによって構成されており、テンプレートの修正やカスタマイズするとなると、多くの場合、コードを書いて修正しなければなりませんでした。この「Divi」はブラウザ上で自由にデザインカスタマイズやテンプレート側の修正が行えるというものです。実際の操作しているシーンを交えた、プロモーション動画が公開されていましたので以下からご覧ください。

動画は以下から

(さらに…)

続きを読む
posted 09:30  |  
Category: plugin , WordPress   
2010年09月11日

フリーで使えるCSS3のメニュージェネレーター「CSS3 Menu. Free CSS Menu Maker」

本来であればjavascriptやflashを使って画像を準備しないと作れなかった、リッチな表現のナビゲーションですが、CSS3の登場に伴い、かなりの部分が、CSS3のみで表現できるようになってきています。今日紹介するのはCSS3で創られた、表現豊かたCSSメニューが簡単に作れるメニュージェネレーター「CSS3 Menu. Free CSS Menu Maker」。

こちらは、上記のようなナビゲーションメニューがフリーでダウンロードすることができます。基本的にはjavascriptは一切使われておらず、テキストで構成されるため、SEOにも優しい作りとなっています。

詳しくは以下

(さらに…)

続きを読む
posted 03:55  |  
Category: WebDesign   
2012年02月11日

アナログ感あふれる塗り感が美しいphotoshopブラシ集「Photoshop Brushes by Blakravell」

様々な表現が可能なクリエイティブツールphotoshop。多くのクリエイターに愛用されていおり、その表現を豊かにしてくれる様々なブラシセットが公開されていますが、今回紹介するのはアナログ感あふれる塗り感が美しいphotoshopブラシ集「Photoshop Brushes by Blakravell」です。

上記のような、少し掠れなども表現され、まるで本物の水彩ブラシで塗り重ね多様な表現のブラシセットが公開されています。

詳しくは以下

(さらに…)

続きを読む
posted 11:01  |  
Category: Design , Photoshop   
2009年03月29日

クオリティーの高いFLASHギャラリー30選「30 Stunning Flash Image Galleries」

WEBサイトを運営していて、その中でも画像や動画をコンテンツにしている方は多いかと思います。今日紹介するのはクオリティーの高いFLASHギャラリーをまとめた「30 Stunning Flash Image Galleries」です。

designflashgallery01
Full Screen XML Gallery v1

今回まとめられたFLASHギャラリーは有料ですが、その分クオリティも十分に高いものになっています。FLASHギャラリーは開発に時間もかかりますので、もし目的と合致したものがあれば買って組み込むと言うのも一つの手なのかもしれません。今日は紹介されているFLASHギャラリーを価格とともにピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 12:21  |  
Category: WebDesign   
tag: webdesign
2011年07月23日

CSS3のWEBデザインを簡易化してくれるUIフレームワーク「CSS3 Button UI」

まだまだ対応ブラウザの問題から、コーポレートサイトなどでは導入が難しいCSSですが、スマートフォンなど環境が整ってきたこともあり、利用し始めているという方も多いと思います。今日紹介するのは、角アール、シャドウなどCSS3を利用した表現を簡単に実装できるCSS UIフレームワーク「CSS3 Button UI」です。

予め、CSSが設定されており、簡単なクラスを割り当てるだけで、CSS3をのボタンを再現することができます。

詳しくは以下

コードの呼び出し例は以下のとおり。

上記は画像で貼り付けてありますが、マウスオーバーの処理もセットされていて、実用的に利用できそうです。その他にも角アールのものや文字の前に画像を表示させるものなどがセットされています。その他のデモは配布元の「CSS3 Button UI」からご覧ください。ボタンはCSS3でとお考えの方は是非どうぞ。

CSS3 Button UI

続きを読む
posted 03:20  |  
Category: WebDesign   
2012年03月21日

イメージ通りの色補正が可能になる!Photoshopアクションまとめ「50 Time Saving Photoshop Actions to Boost Your Images」

スナップ写真でも雰囲気のある写真に変えられる色補正は、補正のプロが存在するほど高度な技術とセンスが必要になり、作業時間もかかるもの。そんな状況に役立つ、イメージ通りの色補正ができるPhotoshopアクションをまとめた「50 Time Saving Photoshop Actions to Boost Your Images」を今回は紹介します。


CoLoR effect 4.5 by `sa-cool on deviantART

写真の明るさを変えられるアクションはもちろん、さまざまな雰囲気を演出できるアクションが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 06:45  |  
Category: Design , Photoshop   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る