TOP  >  WEB制作

Tag : WEB制作

2012年12月20日

シンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」

最近のWEBデザインの主流の一つレスポンシブデザイン。端末の解像度に応じて、その端末に最適化したデザインを提供してくれるものですが、慣れていないとなかなか一から構築となると難しいものです。今日紹介するのはシンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」です。

こちらは「Super Simple Responsive Framework」とある通り、至ってシンプルなもので、テキストリンク、リスト、テーブルなどなど、基本要素のみで構築されています。

詳しくは以下

(続きを読む…)

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

WEBサイトで便利なjQueryモーダルプラグイン15選「15 Cool jQuery Modal Plugins」

アラートを出したり、案内をだしたり非常に多様な使い方で便利に使えるモーダル。それだけに多くのWEBサイトで利用されています。今日紹介するエントリーは、便利なjQueryモーダルプラグイン15選「15 Cool jQuery Modal Plugins」です。


SimpleModal / Eric Martin / ericmmartin.com

シンプルなものから、ギャラリー的なら利用ができるものまで幅広く収集されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:05  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2012年09月17日

WEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」

日本では互換性を重視する傾向がつよくまだあまり、特殊なフォントをjavascriptなどで作り出すような手法はスタンダードではありませんが、中には、挑戦的なサイトもあり、フォントをjsやCSSで見せるそんなサイトもあります。今日紹介するのはWEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」です。


FitText – A plugin for inflating web type

フォントを加工するもの、テキストの組を特殊にしてくれるものなど、様々なフォント関連のjQueryプラグインが紹介されていますが、今回はその中から気になったものをピックアップして紹介したいと思います。

詳しくは以下

Lettering.js – A jQuery plugin for radical web typography.
自動的にclassを割り当てて、傾けたり、色を変えたり色々な処理が可能です。

lettering
 
 
 
 
 
 
It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line.
オブジェクトにそって文字組を行なう事ができます。WEB上で紙のようなデザインが可能になります。

baconjs
 
 
 
 
 
 
Arctext.js – Curving text with CSS3 and jQuery
文字をパスで並べたような、処理をjavascriptで可能にする。

arctext-1
 
 
上記の他にもいくつかのタイポグラフィ関連のjQueryプラグインが公開されています。文字をJS側で制御したいと言う方は是非原文もご覧ください。

jQuery plugins for awesome web typography | CatsWhoCode.com

続きを読む
posted 05:37  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2012年07月16日

最近リリースされた、jQueryプラグイン10選「10 jQuery Plugins that Will Make your Life Easier」

世界中で利用されている便利なjavascriptライブラリjQuery。多くのWEBデザイナー、デベロッパーの手によって日夜新しいプラグインが生み出されていますが、今日紹介するのは最近リリースされた、jQueryプラグイン10選「10 jQuery Plugins that Will Make your Life Easier」です。


blur.js

背景との間にぼかし効果をあたえるものや定番のシンプルでミニマムなツールチップ、写真の上に自分で書き込むペイント機能まで、様々なjQueryプラグインがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2012年07月14日

パララックスを実現するためのチュートリアル&リソース集「Parallax Scrolling Tutorials & Resources」

大きな話題を呼び、国内でも様々なPRサイトに実装されたパララックス(視差効果)。今までには無い体験は多くの人の注目をあつめました。今日紹介するのはパララックスを実現するためのチュートリアルやリソースをあつめた海外のチュートリアル&リソース集「Parallax Scrolling Tutorials & Resources」です。


Behind The Scenes Of Nike Better World

ソースで開示されているところや、根幹の考え方等、示されている方法は様々ですが、今回はその中から比較的分かりやすいと思うチュートリアル、リソースをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:43  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2012年05月27日

jQueryで作るカウントダウンティッカー「How to Code a jQuery Rolodex-Style Countdown Ticker」

ティザーサイトをはじめとして、公開前の期待感をどう作っていくかという部分も近年のWEB制作では求められる部分だと思いますが、今日紹介するのは設定した日時に向けてカウントダウンしてくれるカウントダウンティッカー「How to Code a jQuery Rolodex-Style Countdown Ticker」です。

非常にシンプルな構成と鳴っていて、日、時間、分、秒でカウントダウンを行ってくれます。

詳しくは以下

(続きを読む…)

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

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

2012年12月25日

PSDで制作されたサインイン・サインアップフォーム素材まとめ「Free Sign-In and Sign-Up PSD Files」

ユーザー情報を登録するためのフォームに必ず必要になるのが、入り口となるサインインのデザイン。シンプルな機能面の箇所だけに、味気ないシンプルなデザインに偏ってしまいがちではないでしょうか。今回はそんな状況を改善できる、PSDで制作されたサインイン・サインアップフォーム素材をまとめた「Free Sign-In and Sign-Up PSD Files」を紹介したいと思います。


Classic Login Form | Design Kindle

シンプルなフォームから、サイトのデザインに合わせて使いやすいさまざまなフォーム素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:52  |  
Category: Design , Photoshop   
2008年10月18日

ハイクオリティなWordPressテーマ15選「 15 High Quality Premium-Like Free WordPress Themes」

海外ではかなりレベルの高いテーマが配布されているWordpress。本当に様々なテーマが出回っていますが、今日紹介する「15 High Quality Premium-Like Free WordPress Themes」は数あるWordpressテーマのなかでも有料の物に引けを取らない素晴らしいテーマを15個、選び抜いたエントリーです。


1. Agregado Lifestream

有名なのもあり、よく見かけるテーマもありますが、今日はその中でもあまり見かけない物を中心にいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:30  |  
Category: WebDesign , WordPress   
tag: CSS webdesign
2011年12月05日

クリスマスにぴったりなデザインフォントまとめ「A Collection of 34 Free Christmas Fonts」

アドベントカレンダーのカウントダウンも始まり、街全体がクリスマス一色。そんな中今回は、クリスマスイメージを手軽に表現できるフォントをまとめた「A Collection of 34 Free Christmas Fonts」を紹介したいと思います。


PC Snowballs Font | dafont.com

もみの木や雪、サンタクロースの帽子などクリスマスをイメージさせるアイテムを利用した、デザインフォントばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:45  |  
Category: Design , Font   
2008年04月05日

WordPress2.5にアップグレードしてみての感想「使いにくい…」

先日「待望のWordPress2.5正式版がリリース-導入に当たってのまとめ」でも取り上げましたて、少し待ってからアップグレードしようとエントリーしましたが、待ちきれずにWordPress2.5にDesignDevelopもアップグレードしました。変わる変わるのWEB上では言われていましたがここまで変わるとは…といったのが正直な感想です。

アップグレードは特に問題なく無事終了。動作も全く問題なく、いくつか使えなくなったプラグインはある物の運営には困らないレベルでした。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:26  |  
Category: WordPress   
tag: WordPress
2016年11月03日

フリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」

数多くの情報を整理し分かりやすく表現するために様々なユーザーインターフェイスが開発されてきましたが、今回紹介するのはフリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」です。

egjs01

実現できるユーザーインターフェイスは全部で4つ。タッチアクションから座標位置を取得するeg.MovableCoord、シンプルなフリックeg.Flicking、要素がビューポート内に存在するかを確認できるeg.Visible、グリッドスタイルをループで生成するeg.infiniteGridとなっています。

詳しくは以下

(続きを読む…)

続きを読む
2013年09月24日

さまざまな柄を手軽に表現できるPhotoshopパターンのまとめ「20 Latest Useful Free Photoshop Pattern Sets for Designers」

Photoshopパターンは手軽に模様を作り出すことができる、とても便利なツール。デザイナーの方は使用されることも多いのではないでしょうか?今回はそんなPhotoshopパターンの中でも、さまざまな柄や模様をテーマにした「20 Latest Useful Free Photoshop Pattern Sets for Designers」を紹介したいと思います。

20lufppsfd_0
Black And White Seamless Patterns 2 by ~cesstrelle on deviantART

シンプルな模様からリアルな質感のものまで、さまざまなパターンがまとめられています。中でも気になったものをピックアップしたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:27  |  
Category: Photoshop   
2008年11月19日

グラフィックに特化したフリーベクターデータ集「60 Free Vector Graphics for Digital Art Pros」

今まで様々なベクターデータを紹介してきましたが、今回紹介する「60 Free Vector Graphics for Digital Art Pros – VECTORTUTS」はグラフィカルな表現に便利なベクターをひたすら集めたまとめエントリーです。ドクロ、矢印、スポーツ、植物などなど、想像力をかき立ててくれるようなベクターデータが揃っています。


2. Designious Vintage Mega Pack

全部で60種類にも及ぶベクターデータが紹介されていますが、今回はその中から気になったベクターデータをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:53  |  
Category: Design , vector   
tag: Design vector
2007年10月31日

WordPressの全オプションが変更できる隠しページ「All Options」

WordPressの管理画面から直接は行けませんが、WordPressの全オプションの値が表示され変更できるページが存在します。
それは「All Options(すべての設定)」と呼ばれ下記のURLを直接打ち込む事でページが表示されます。

http://(あなたのワードプレス設置のドメイン)/wp-admin/options.php

pingの送信先から記事の表示設定、プラグイン固有の設定等、名前の通り、ありとあらゆる設定項目がずらっーと並んでいて、表示、変更する事ができます。

All Options

完成されたページを少しづついじっていく時は逆に不便であまり必要ないかも知れませんが、新規でWordPressを導入したときや、サーバーを移転して設定するときは便利ページです。ただしシリアライズされたデータの変更は不可みたいでその部分は「SERIALIZED DATA」と文字ボックスに表示され、編集できないようになっています。

頻繁に使うページではないかも知れませんが覚えてくと便利かと思います。

via AOINA.COM

続きを読む
posted 09:57  |  
Category: WordPress   
tag: WordPress
2011年06月13日

デザインに洗練さを与える スクリプトフォントまとめ「50 Best Free Script Fonts」

デザイン上でフォントを選定するセンスは、作品の表情を左右する程大変重要なものです。特に繊細なデザインフォントは、ラインの太さやバランスなどが選定の際のポイントとなってきます。そんな中今回は、デザインに洗練さを与えてくれるスクリプトフォントを集めた「50 Best Free Script Fonts」を紹介したいと思います。


Billy Argel Font Font | dafont.com

マジックでラフに描いたようなフォントから、繊細なラインが美しいタイプまで、さまざまなフォントがラインナップされています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:52  |  
Category: Design , Font   
2011年09月18日

簡単にオンラインポートフォリオが作成できるWEBサービス「Carbonmade」

WEBでは多くの人に自分のデザインや作品を公開する術がありますが、今回は誰でも簡単に自分のポートフォリオが作成できるWEBサービス「Carbonmade」。HTMLなども全くわからなくても利用できるようになっています。

現在約40万ものポートフォリオが公開されており沢山の方が利用しているようです。無料で出来る範囲は5つのプロジェクトで35イメージまで。有料版は50のプロジェクトが作成でき500イメージ+10ビデオが公開できるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:12  |  
Category: WebService   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る