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
このエントリーをはてなブックマークに追加

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

2015年04月22日

リアルな質感をデザインに ハイクオリティなテキストエフェクト「30 High Quality Text Effects Photoshop Files」

デザインに欠かすことのできない要素の一つとしてテキストがありますが、ただ平打ちをするだけではどうしても物足りないということもあるのではないでしょうか?そんな中今回は、リアルな質感を表現できる、ハイクオリティなテキストエフェクト「30 High Quality Text Effects Photoshop Files」です。

Leffect0422_3
Psd Wall Poster Text Effect | Photoshop Text Effects | Pixeden

インパクトのあるデザイン性が特徴のテキストエフェクトが30種紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2007年11月13日

イラストレータのチュートリアル集「Illustrator Tutorials」

イラストレータで何かグラフィックなりアイコンなりを作る時全く作ったことがないと、とんでもなく面倒くさい方法になったりデータ的にあまりキレイとは言えないパスになってしまったりします。そんな時に役立つのがチュートリアル。

イラストレータのチュートリアル集

今回紹介する「Illustrator Tutorials」はハロウィンのカボチャからiTuneのアイコンまで幅広いグラフィックの書き方を収めたイラストレータのチュートリアル集です。言語は英語ですが図を多く挿入しながら紹介してくれていますので、英語が読めない方でも参考になるかと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:11  |  
Category: Design   
tag: 
2008年02月19日

様々なベクターデータやデザインに役立つ素材を配布する「Dezignus.com」

デザインする上で、一から作る手間を大幅に短縮してくれるベクターデータや素材たち、うまく使えば非常に便利で作業時間も大幅に短縮できます。今日紹介する「Dezignus.com」は様々なジャンルのベクターデータや素材を紹介しているblogです。

dezignus01.jpg

ベクターデータのクリップアートからphotoshopのpsd素材、アイコンと様々な種類のデータが集められています。いくつか下記にピックアップしてみたのでご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:45  |  
Category: Design , vector   
tag: Design vector
2018年11月07日

いろいろなゲームキャラクターを楽しめる「Free Monster Enemy Game Sprites」

ゲームのデザインには非常にたくさんのパーツが必要で、1つ1つをデザインすると非常に大変なことも。今回はそんなシーンで利用できそうなフリースクリプト「Free Monster Enemy Game Sprites」を紹介したいと思います。

monster1

モンスターだけどどこか可愛らしい印象の、いろいろなキャラクターが揃ったスクリプトです。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design   
2016年07月26日

WEBデザインをテーマにしたフリーのアイコンセット「100 Web Design Icons」

WEBデザインを円滑にしてくれるアイコンセット。様々なテーマでアイコンセットが日々公開され、クリエイターの制作活動の一助となっていますが、今日紹介するのはWEBデザイン自体をテーマにしたフリーのアイコンセット「100 Web Design Icons 」です。

preview-1

このアイコンセットはWEBデザインでよく見かける、ワイヤーフレームやビデオプレイヤー、解析画面、スマートフォンなどのUIなどなど、WEBデザインをテーマにしたアイコンが全部で100個収録されています。アイコンの一覧が公開されていましたので以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:17  |  
Category: Design , vector , WebDesign   
2008年04月01日

WEBデザイナーのタイポグラフィを助ける101のサイト「101 Typography Resources」

WEBデザインをしていても、紙のデザインをしていても関わってくることが多いタイポグラフィ、イメージではなく文字での訴求はもっともわかりやすい手法だからかもしれません。今日紹介する「101 Typography Resources for Web Designers」はWEBデザイナーのための素晴らしいタイポグラフィを作り上げるためのヒントや助けになるリンク集です。

typography.jpg

「101 Typography Resources for Web Designers」はただ101個タイポグラフィ関連のリンクが羅列しているだけではなく、ある程度ジャンルによってカテゴライズされています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:56  |  
Category: Design , Font   
tag: Design Font
2009年11月19日

サイトのアクセシビリティをチェックしてくれる「アクセシビリティチェックサイトHAREL」

アクセシビリティとはWEBサイトにおいて、どの程度広く使いやすいかを示すもので、利用しやすさといった意味合いで使われる言葉ですが、今回紹介「HAREL」はURLを入力するだけで、サイトのアクセシビリティをチェックしてくれるWEBサービスです。

harel01

チェック結果は得点で表示され、どのくらい優れているかわかりやすく表示されます。ざっくりと下判定の他に「マークアップおよびスタイルシートは適切に使用すること 」、「ナビゲーションの仕組みを明確に提供すること 」などカテゴリ別に細かなアドバイス付きの評価も見ることができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:57  |  
Category: WebService   
2009年03月14日

プロフェッショナル向けフリーフォント75選「75+ Excellent Free Fonts For Professional Design」

様々なフリーフォントがWEBで公開されていますが、今日紹介するのはそんなフリーフォントの中でもプロのデザイナーも使えるクオリティの高いフォントを集めた「75+ Excellent Free Fonts For Professional Design」です。

profontfrees01
Lacuna

キレイ目なフォントから、セリフ体、記号のようなフォントまで様々なフォントが紹介されていますが、今日はその中から気になったフリーフォントをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:34  |  
Category: Design , Font   
tag: Design Font
2012年09月08日

デザイナーのための新しいフォント集「8 New Free Fonts for Your Designs」

デザインに多大な影響を与えるフォント。それだけに多くのフォントを持っておきたいところなのではないでしょうか?今日紹介するのはデザイナーのための新しいフォント集「8 New Free Fonts for Your Designs」です。


Sreda

比較的、細身で綺麗めなフォントが集められています。全部で8つのフォントがまとめられていますが、今日はその中からいくつか気になったフォントをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:21  |  
Category: Design , Font   
2009年09月10日

商用可!5000を超えるシルエットベクターデータ配布サイト「All Silhouettes」

様々なデザインシーンに使えるシルエット素材。単純で、曖昧なので、どんなデザインにも合わせる事ができますし、背景だったりアクセントだったり使い勝手も非常に良い素材の一つですが、今回紹介するのはそんなシルエット素材を集めたWEBサイト「All Silhouettes」です。

shiruetto01

全部で5000を超えるシルエットが88にも及ぶパックで公開されています。種類は様々で、動物から人間、機械、矢印と様々なシーンのシルエットが公開されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:00  |  
Category: Design , vector   
tag: Design vector

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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