TOP  >  WEBtool

Tag : WEBtool

2010年04月02日

WEBデザインのワイヤーフレームを書くためのツール10選「10 Excellent Tools for Creating Web Design Wireframes」

WEBデザインと言っても様々なフローがあり、受注を受けたとき、いきなり、Fireworksやphotoshopでデザインを始めるという方はなかなか少ないと思います。今回はデザインの前段階のワイヤーフレームを描くためのツールを集めたエントリー「10 Excellent Tools for Creating Web Design Wireframes」を紹介したいと思います。

.mockflow.com/”>MockFlow

基本的にモックアップをつくるための前段階のものなので、そこまで複雑な表現はできませんが、WEBのワイヤーを作るという意味で、様々な便利な機能が組み込まれています。今日はまとめられているツールのなかからいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

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

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

ie9preview

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

詳しくは以下

(続きを読む…)

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

クロスブラウザ対策のための表示確認ツールのまとめ「Useful Tools for Testing Cross Browser Compatibility」

現在様々なブラウザがシェア争いを繰り広げており、人によって利用しているブラウザは色々だと思います。それゆえにWEB制作者にとっての一つの課題が、多々あるブラウザでの表示を統一しなければ行けないという命題が化せられると言う事です。特に現状はブラウザの種類の違いだけではなく、利用されているバージョンも異なっているため、そちらも念頭にいれなくてはいけなくて、主要ブラウザとそのバージョン違いを検証するだけでもかなり手間がかかります。そこで今回紹介するのは主要なブラウザ間での表示確認を簡単にしてくれるWEBサービス、ツールをまとめたエントリー「Useful Tools for Testing Cross Browser Compatibility」を紹介したいと思います。

browser_testing_1
Adobe Browser Lab

いくつかまとめられていますが、今日はその中からさらに気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:58  |  
Category: WebDesign , WebService   
このエントリーをはてなブックマークに追加
2009年06月27日

もう色には迷わない!配色補助ツールのまとめ「Online Color Tools For Web Developers」

デザインする上で重要な要素の一つ色。色彩感覚については各々個人で異なると思いますが、色が与える印象と言うのはとても大きく、同じレイアウト、同じコンテンツだとしても配色次第で気持ちよくも気持ち悪くもなります。今日紹介する「Online Color Tools For Web Developers」は色を決めていく上で役に立つオンラインツールを集めたエントリーです。

color
4096 Color Wheel

様々な「色」にまつわるオンラインツールが集められていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:10  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2009年06月09日

モックアップをドラッグ&ドロップで簡単に作成できる「Balsamiq Mockups」

デザインの変更の手間を防ぐ為にWEB制作時にはコーディングしていないモックアップをデザイン案として見せるのが主流だと思います。今日紹介するのはラフなモックアップをドラッグ&ドロップで簡単に作成できるWEBツール「Balsamiq Mockups」です。

balsamiq

パーツをおいていくような感覚で簡単に作成できます。実際「Balsamiq Mockups」を使って制作しているイントロムービーがYouTubeにアップロードされていましたので、下記に貼付けておきます。

動画は以下から

(続きを読む…)

続きを読む
posted 10:31  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2008年10月10日

オンラインイメージエディタのまとめ「6 Exceptional Web-based Image Editors」

作業をするときはメインのマシンが決まっていて、ほぼそのマシンを使って作業をするのですが、ごく希に出先などで作業する時もあり、その際に困るのがソフト。同じ環境はもちろん難しいですが、画像編集とか必要になった場合などの作業が発生した時困ってしまっていました。


Pixlrのインターフェイス

WEBさえあればどんな所でも使えるオンラインイメージエディタのまとめが「Six Revisions」で紹介されていましたので、今日はオンラインイメージエディタのスクリーンキャストを交えながら、自分のメモがわりにまとめておきたいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:33  |  
Category: Tool   
tag: Tool WEBtool
このエントリーをはてなブックマークに追加

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

2012年11月18日

細部までこだわるためのCSS3フォームデザインパーツチートシート「CSS3 Form Styling Cheat Sheet」

「神は細部に宿る」といわれるように。デザインの業界に置いて、デザインについてはのクオリティは細部をどれだけ作り込めたかで決まってきます。今日紹介するのは、細部までこだわるためのCSS3フォームデザインパーツチートシート「CSS3 Form Styling Cheat Sheet」です。

formparts2

フォームのインプットのスタイルだったり、ボタンのスタイルを、サンプルと再現できるソースコードともに紹介してくれるというものです。どれもものすごくシンプルなものなのですが、paddingの取り方だったり、ちょっとした角アールだったり、中と外に綺麗にかけられたドロップシャドウなどなど、細かな部分を詰めた洗練されたフォームの材料を取得する事ができます。いくつか下記に紹介致します。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:31  |  
Category: WebDesign   
2014年11月01日

600種の豊富なベクターシルエット素材「Free download: 600+ free vector silhouettes」

いろいろなデザインシーンで便利に活用できるベクターのシルエット素材。さまざまな種類をストックしておくといざという時に活躍してくれます。そんな中今回紹介するのは、600種の豊富なベクターシルエット素材「Free download: 600+ free vector silhouettes」です。

600vector1

人間はもちろん、動物、乗り物など、種類豊富にさまざまなポーズのベクターシルエットがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: vector   
2013年03月28日

春らしさを楽しめるフローラルブラシまとめ「A Collection Of Free Floral Brushes For Photoshop」

桜も見頃を迎え春を感じられるようになり、制作するデザインにもあたたかみのあるものが増えてきていると思います。そんな中今回は、春らしさを楽しめるフローラルブラシをまとめた「A Collection Of Free Floral Brushes For Photoshop」を紹介したいと思います。


Floral Stroke by ~noniq on deviantART

花や植物をモチーフにしたベクターイラストのブラシから、手書きの優しい雰囲気のフローラルブラシまで、さまざまなブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:23  |  
Category: Design , Photoshop   
2008年05月29日

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

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

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

詳しくは以下

(続きを読む…)

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

ロゴ制作にも使いやすい個性的なフォントまとめ「20+ examples of beautiful and inspiring fonts」

フリーフォントの中にも、プロのデザイン制作に利用しやすいクオリティの高いフォントが多数発表されています。そんな中から今回は、ロゴ制作など、インパクトを与えたいデザインにも利用しやすい、個性と洗練さを兼ね備えたフリーフォントをまとめた「20+ examples of beautiful and inspiring fonts」を紹介したいと思います。


TELÉFONO Free Font on the Behance Network

スタイリッシュなフォントからおもちゃのような可愛らしいフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:59  |  
Category: Font   
2007年12月25日

ハイクオリティなアイコンの作り方を動画で紹介する「iconka.com」

インターネット上で配布されているハイクオリティーなアイコン、これらは一体どういう風に作られているか、気になった事は無いでしょうか?今回紹介する「iconka.com」ではハイクオリティーなフリーアイコンを配布するとともにその作り方を動画で公開しています。

フリーアイコン配布と動画チュートリアル

サイトではいくつかのシリーズのアイコンの作り方をまとめたビデオチュートリアルが公開されています。一つ一つ詳しく追っていく感じではありませんが、こんな風にして作られているのかと言うのはわかるようになっています。

動画は以下から

(続きを読む…)

続きを読む
posted 07:05  |  
Category: Design   
2011年03月01日

ラインの美しさと遊び心の詰まったフォント集「thumbnail Fonts \ Resources 30 Elegant and Beautiful Free Fonts for Creative Designs」

デザインの印象を左右するフォント選びは重要であり、神経を使う作業の1つでもあります。今日紹介するのは、ラインの美しさと遊び心のあるフリーフォントを集めたフォント集「thumbnail Fonts \ Resources 30 Elegant and Beautiful Free Fonts for Creative Designs」です。


Scriber™ – Webfont & Desktop font « MyFonts

シンプル系のロゴにも使えそうな質の高いフォントや、個性的で遊び心溢れるフォントが全部で30種類集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:57  |  
Category: Design , Font   
tag: 
2008年09月24日

リアルなガジェット制作のためのphotoshopチュートリアル「27 Best Photoshop Gadget Design Tutorials」

自分でガジェットのデザインをしたい、思い浮かべているアイデアはあるけど、カタチにする方法が分からないと言う方にお勧めなのが、今回紹介するリアルなガジェットのphotoshopチュートリアル「27 Best Photoshop Gadget Design Tutorials to Design Realistic Gadgets」です。


Mobile Phone Styled Like HTC Touch Diamond

携帯電話、ゲーム機、ミュージックプレーヤー、USBメモリ、腕時計まで様々なガジェットを表現する為のチュートリアルが集められています。今回はその中でも特に気になったチュートリアルを紹介していきたいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:45  |  
Category: Design , Photoshop   
2016年06月16日

重ねても背景でも使える、高品質な光の背景「40 Free High Resolution Vibrant Blurred Backgrounds」

そのままでは何か寂しい時に重宝するのがテクスチャ。実在する紙や木などのテクスチャの他にも様々なテクスチャがまとめられ公開されていますが、今日紹介するのは重ねても背景でも使える、高品質な光の背景「40 Free High Resolution Vibrant Blurred Backgrounds」です。

photo-overlay

上記のように写真に重ねることで、スナップ写真に大きく表情が現れます。全部で40ものテクスチャがまとめられており、以下からその全てをご覧いただけます。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:36  |  
Category: Design , Photoshop   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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