TOP  >  webdesign

Tag : webdesign

2010年03月25日

ドラッグして画像を回転できるjqueryプラグイン「jQuery Reel Plugin」

軽量で高機能なjavascriptライブラリjQueryその手軽さから、多くのWEBデザイナーに利用されており、様々な機能が開発され公開されていますが、今回紹介するのはドラッグして画像を回転できるjQueryプラグイン「jQuery Reel Plugin」です。

reelreel

実際言葉だけではなかなか伝えづらいのでデモが配布元に公開されていましたので、デモをご覧になりたい方は「jQuery Reel Plugin」からどうぞ。こちらはクイックタイムのVRのように画像を回転させる事ができます。これによりプロダクトを様々な側面で見たり、パノラマビューを違う角度でみせたりなど、いままでFLASHなどを使わなければ実現できなかった表現が可能になっています。

詳しくは以下

(さらに…)

続きを読む
posted 11:07  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2010年03月24日

CSS3で作るドロップダウンメニュー「CSS3 Dropdown Menu」

通常アールの効いたデザインでドロップダウンメニューを制作するときはFlashだったりjavascriptだったり何らかなスクリプトと画像を使って、組み上げるというのが現状では主流だと思いますが、今日紹介するのはCSS3で実現するドロップダウンメニュー「CSS3 Dropdown Menu」です。

css3develop0
CSS3 Dropdown Menu DEMO

ドロップシャドウなど細かなデザイン処理はCSS3で制御されていますので、デザイン部分もCSS側で細かく調整できます。

詳しくは以下

(さらに…)

続きを読む
posted 11:22  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2010年03月23日

縦横にアコーディオンするjQueryアコーディオン「Grid Accordion with jQuery」

多くのコンテンツを少ない面積で見せることができるアコーディオンによる見せ方は様々なWEBのシーンで使われていますが、今回紹介するのは、通常一方向だけではなく、縦と横、両方向に展開ができるjQueryを使ったアコーディオン「Grid Accordion with jQuery」です。

desingdevelopsjquery
InfoGrid – DEMO

上記のように、多数のカテゴリーでコンテンツが多岐に渡る場合や表組みで、比較したいときなどは非常に便利な機能だと思います。

詳しくは以下

(さらに…)

続きを読む
posted 08:06  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2010年03月20日

JSで実現するシンプルで使い勝手のいいコンテンツカバーフロー「ContentFlow」

Macを使っている方には馴染み深い、立体的で空間的にコンテンツやファイルの内容を表示するインターフェイスカバーフロー。そのインターフェイスはOSだけではなく、様々な部分で活用されていますが、今日紹介するのはjavascriptで実現したコンテンツカバーフロー「ContentFlow」です。

contetscover

作り自体は非常にシンプルなものになっており、動作はjsで制御、画像などはすべて外部から読み込んでいるみたいで、枠組みだけ作ってしまえば、画像を入れ替えるだけで、差し替えたり更新できたりします。

詳しくは以下

(さらに…)

続きを読む
posted 11:53  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2010年03月17日

photoshopでWEBを作る人のためのWEBデザインチュートリアル「20 High Quality Photoshop Web Design Tutorials」

WEB制作は人によって使うツールは様々だと思いますが、その中でも多くのWEBデザイナーが利用しているツールphotoshop。今日紹介するのはphotoshopでWEBを作る人のためのWEBデザインチュートリアル「20 High Quality Photoshop Web Design Tutorials」です。

webdesign_tutorials_01
Create a Clean and Classy Web Design in Photoshop

様々なデザイン感のWEBデザインをphotoshopで制作するのはどうしたら良いのかという、実例を交えたチュートリアルが多数公開されています。

詳しくは以下

(さらに…)

続きを読む
posted 08:34  |  
Category: Design , Photoshop   
このエントリーをはてなブックマークに追加

Internet Explorer9 プラットフォームプレビュー版

インターネットブラウザの中でも多くのシェアを持つInternet Explorer多くのユーザーを持ち、そのシェア故に現状多くのバージョンが混在して使われているという特殊なブラウザでもあります。今日はその最新版のInternet Explorer9のプレビュー版が公開されていましたので紹介したいと思います。

ie9preview

IE8から大きく変わった点はJavaScriptのパフォーマンス向上とHTML5、DOM、CSS3などの標準規格への対応。

詳しくは以下

(さらに…)

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

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

2016年08月02日

レスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」

WEBサイトでも頻繁に利用されるモーダルウィンドウ。詳しく情報を表示したり、アラート的に利用したり、コンタクトフォームなどで利用したりなど様々な使い方が可能ですが、今回紹介するのはレスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」です。

izimodal1

モーダルウィンドウとしての機能は一般的なものですが、モーダル内のオブジェクトが細かく動作しクオリティが高い印象を与えてくれるモーダルウィンドウです。

詳しくは以下

(さらに…)

続きを読む
posted 09:50  |  
Category: javascript , WebDesign   
2015年11月28日

主流のフラットデザインに対応したアート系ツールのベクターアイコンセット「Flat Vector Art Tools Icon Set」

現在主流となっているフラットテイストのデザイン。その流行に合わせて、配布される素材も対応したデザインのものが非常にたくさん見られます。そんな中今回紹介するのは、主流のフラットデザインに対応したアート系ツールのベクターアイコンセット「Flat Vector Art Tools Icon Set」です。

toolicon

アート系の作業で使用する道具等がアイコン化されており、セットでダウンロードできるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:28  |  
Category: Design   
2015年03月04日

2000個の種類豊富なフリーアイコンセット「2000 Flat Icon Pack」

webサイト等を作成するのに便利に活用できる素材・アイコン。非常に種類豊富に展開されていますが、いろいろな種類があるがゆえにどれをダウンロードすればよいか迷ってしまうことも。今回はそんな時におすすめ、2000個の種類豊富なフリーアイコンセット「2000 Flat Icon Pack」を紹介したいと思います。

2000icon

さまざまなカテゴリのアイコンが揃っており、主流のトレンドに合わせたフラットデザインでデザインされている点も魅力となっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:58  |  
Category: Design   
2009年04月24日

フリーフォントがダウンロードできるサイトまとめ「30 Sites For Fantastic, Free Fonts」

デザインに使えるフリーフォントを今までいくつも紹介してきましたが、今日紹介するのはそんな便利なフリーフォントをダウンロードできるサイトをまとめたエントリー「30 Sites For Fantastic, Free Fonts」です。

freefontsite01
Neatfonts.com

全部で30ものサイトが公開されていますが、いままでDesigndevelopで取り上げた事がないサイトを中心にいくつか紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 11:29  |  
Category: Design , Font   
tag: Design Font
2007年11月21日

フロートウィンドウを生成するjavascript「Mocha」

ページ内を自由に移動でき、フロートするウィンドウを複数同一ページに生成できるスクリプトが今回紹介する「Mocha」です。

Mootoolsmocha

Mochaで生成したフロートウィンドウは拡大、閉じるボタン付きで、マウスのドラッグ操作での移動も可能。日本語表示もOKとかなり自由度の高いウィンドウとなっています。

詳しくは以下

(さらに…)

続きを読む
posted 06:35  |  
Category: WebDesign   
tag: 
2013年01月01日

最近リリースされたクリエイティブなフリーフォント集「20 Must Have New Free Fonts」

日々、クリエイティブで高品質なフォントが世界中でリリースされておりすが、今日はその中から、最近リリースされたフリーフォントを集めたエントリー「20 Must Have New Free Fonts」を紹介したいと思います。


Stiff Staff

シンプルなものから、個性的なフォントまで幅広く、フォントが集められていますが、今日はその中から幾つか気になったフォントをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 09:30  |  
Category: WebService   
tag: 
2016年11月13日

アナログ感のある写真を表現するPhotoshopアクション「Anaglyph Photoshop Actions」

Photoshopなどもフォトレタッチツールで写真は撮影後、様々な表情を見せてくれますが、今日紹介するのはアナログ感のある写真を表現するPhotoshopアクション「Anaglyph Photoshop Actions」です。

analog

ただ綺麗にするだけでは無く、あえてアナログフィルムを現像したような版ズレや粒子などを表現したものとなっています。全部で15種類のフィルタがセットとなっており、様々な表情のアナログ感を表現できるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:21  |  
Category: Design , Photoshop   
2013年02月25日

染みがデザインになったテクスチャまとめ「A Collection of High Resolution Stain Texture for your Design」

制作したデザインの背景などに利用するテクスチャ素材は、何枚も収集しバリエーションを増やしておきたいものです。今回は、コレクションに是非加えたい、染みがデザインになったテクスチャまとめ「A Collection of High Resolution Stain Texture for your Design」を紹介したいと思います。


Texture: Tea Stain II

コーヒーなどの液体が紙や布に染みこんだ、独特の味を感じさせるテクスチャが多数紹介されています。気になったものをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:33  |  
Category: Design   
2014年12月27日

ピザショップを始め飲食店系デザインで利用できるフリーアイコン「FREE PIZZA ICONS SET」

飲食店などのプロモーションやブランディングなどに、webサイトやショップツールは欠かせない存在。分かりやすく親しみ易いデザインも重要な要素となるのではないでしょうか?そんな中今回紹介するのは、ピザショップを始め飲食店系デザインで利用できるフリーアイコン「FREE PIZZA ICONS SET」です。

outline1227

ポップなテイストが特徴の、100種のアウトラインアイコンがセットでダウンロードできるようになっています。

詳しくは以下

野菜や果物、デザート、ドリンクなどのフード系を始め、ピザカッターや生地を伸ばすローラーなどの料理道具、また中には、音符やスターマークといったアイコンも。サイトデザインのポイント使いはもちろん、メイングラフィックの飾り付けとしてなど、使い方次第でいろいろな場所で活躍してくれそうです。

形式はpsdとai。いろいろなサイズが揃っているのも嬉しいところです。飲食店系のデザインを手がける際は一度、参考にしてみてはいかがでしょうか。

(さらに…)

続きを読む
posted 08:28  |  
Category: Design   
2009年07月10日

jQueryを使ってロールオーバーのエフェクトを操る「Blend, a jQuery plugin」

バナーだったりボタンだった、ロールオーバーエフェクトはWEBの中でいたるところに用いられていて、その手法や実現方法も様々だと思いますが、今日紹介する「Blend, a jQuery plugin」はCSSの背景処理をコントロールできるプラグインです。

jqueryblend01

ナビゲーションを例にして実例が示されていて、ゆっくりと浮き出てきたり、点滅させたり、逆にだんだん解けしていくと言ったような事が設定可能です。

詳しくは以下

(さらに…)

続きを読む
posted 05:48  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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