2017年、デザイナーに人気だったデザインツール、プレインストーミング・アイデアのツール、ワイヤーフレームやインターフェイスデザインのツール、プロトタイピングのツール、ファイル管理とバージョン管理ツール、そして2018年に注目しておきたいデザインツールを紹介します。 Design Tools Survey by Taylor Uxtools.coの元記事は英語で読むことができます。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2017年に最も人気だったデザインツール アンケートの対象者 1. ブレインストーミングとアイデアツール 2. ワイヤーフレームツール 3. インターフェイスデザインツール 4. プロトタイピングツール 5. ハンドオフツール 6. デザインシステムツール 7. ファイル管理とバージョン管理ツール 8.

「画像」を加工する際にどのようなツールを使ってますか？ 様々なツールがありますが、使いやすさに定評があるのは、Evernote社が提供している「Skitch（スキッチ）」です。 ▼使いやすさに定評があるSkitch 直感的なUIで使いやすく、矢印などの注釈もPOPで可愛らしいので、多くのユーザーが愛用しているのですが、今年の2月突然Windowsがサポート対象外になりました…。 Windowsユーザーの人々にとっては、かなりの悲報だと思います。（私もWindowメインなので、ショックでした。） 今回は、そんなWindowユーザーの方にぴったしの画像加工ツール「Screenpresso（スクリーンプレッソ）」を紹介します。 ▼Skitchの使い方については、こちらの記事をご参考ください。 無料で自由自在に画像をカットできる神ツールSkitchの使い方 まずはダウンロード！ 早速、Screen

日本語のフォントを使って、ロゴやタイトルをデザインする時のアイデアとすぐに役立つデザインのテクニックをAdobeから紹介します。 手持ちのフォントに一手間加えるだけで、素敵なデザインに変わります。 ※記事の掲載にあたり、Adobe広報様に許可を頂いています。 目を引く文字デザインの作成方法: 初級編 目を引く文字デザインの作成方法: 中級編 簡単にできるロゴの作り方 目を引く文字デザインの作成方法: 初級編 初級編では、非常に簡単な作業で、ユーザーの目を引く文字のデザインテクニックが使用されています。もちろん、ここから更にアレンジを加えるのも有りです。

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

もはや画像編集ソフトの代名詞ともいえる、Adobe Illustrator。 多機能で様々なことができる反面、あまり使いこなせていないと感じている方もいらっしゃるのではないでしょうか。しかし、デザインのプロでもないノンデザイナーでも、いくつかの方法を学ぶだけで、アッという間にプロも驚く写真加工ができてしまいます。Illustratorにはもともと素晴らしい機能があるのに、使いこなせていないのはもったいない……。 そこで今回は、ノンデザイナーでも知っておきたい、Illustratorの基本操作と便利な小技を11個紹介していきます。 Illustratorをまだお持ちでない方は、Adobeのホームページで30日間無料体験ができる体験版をダウンロードできますので、ぜひそちらもあわせてご利用ください。 Illustratorの基本操作＆便利な小技11選 1. 美しい曲線を描く きれいな曲線を描こう

Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

ブログでインタビューや対談などの記事でよく見る「サムネイルと吹き出しを並べて話してるように見せる」デザインを作ってみました。 floatを使わずにtable-cellを使って作りましたので、簡単に実装できますよ。 コピペで簡単に作れますのでお気軽に使ってください。

メニューなどをリストで実装する時に、クリックができないデッドゾーンができてしまうことがあります。この問題を解決するline-heightとpaddingを使い分けて実装するテクニックを紹介します。 In CSS, set line-height first, padding second 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 何が問題か？ 何が起きているか？ 解決方法はありますか？ 何が問題か？ ハッカーニュースを見ていたら、Zapierブログのこの記事を見つけました。 このメニューにおける問題に気付かないわけにはいきませんでした。

こんにちは。エディターの坂口です。まだまだフォトショが使いこなせないので、フリーの画像編集ツールを使い倒しています。 最近、画像編集スキルが求められる案件が急激に増えたため、より簡単で確実なツールを求めて取捨選択を行いました。その結果、「最低でもこの5つを押さえておけば大丈夫」と言える無料の画像編集ツールが浮かびあがって参りましたので、この機会にご紹介したいと思います。 [目次] 必要な画像編集はこれ一本で大体クリア！「PhotoScapeX」 動画をGIFに一発変換「PicGif Lite」 GIFの容量を瞬間圧縮「Compressor」 集中線が思いのままに「集中線追加ツール」 画像に矢印や枠線をつけたいなら「Skitch」 ※本記事は主にmacユーザー向けの内容となっておりますが、ご紹介する5つのうち、「PicGif Lite」以外はwindowsでも利用可能です 必要な画像編集はこ

Photoshopで画像を切り抜いたり、選択範囲やマスクを作成するのにはいろいろな方法が用意されています。しかしCC 2015.5からの「選択とマスク」、CC2018の「被写体を選択」を一度使ってしまうと、ほかのやり方には戻れないくらい簡単で、そして正確に作成することができます。 そしてさらに進化したPhotoshop CC2021での「選択とマスク」「被写体を選択」の使い方を紹介します。 ちなみに、下の作業時間は1分かかっていません。

READ MORE こんにちは、ちびまや（@Mayayan6）です。 最近読んだ、webデザインに関する本で、いろいろと考えさせられることがあったのでそれをまとめます。 webデザイナーとしてこれから頑張ろう！って人のために役立てば嬉しいです＾＾ クライアントと制作側の「伝えたい情報」と、ユーザーの「知りたい情報」の差 最近、とあるピラティス系のスタジオサイトを運営したりしてて、クライアント側から、「今度はこれを売りたい！」とか「この新しい情報を全面に押したい！」といった依頼をいろいろと受けます。 確かに、新しい情報を押すのも大切なんですが、ときどき立ち止まって考える必要があるなと思いました。「ユーザーが知りたい、探している情報はどれか」という点を。 サイト側が伝えたい情報に導いていくことを「導線」、ユーザーが自ら知りたい情報を求めて動いていくことを「動線」といい、おなじ響きでも意味合いは

日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか？ 公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。

Photoshopを使った画像補正で無くてはならない機能が「トーンカーブ」です。感覚で使うこともできますが、最大限に活用するためには正しい理解が必要です。 今回はトーンカーブの基礎、活用方法をご紹介します。 これまでなんとなく使ってきた方、思い通りの結果にならないという方はぜひご覧いただき基礎を身につけてみてはいかがでしょうか。 1.トーンカーブとは トーンカーブの機能は多くのペイントソフトに付属していますが、ここではPhotoshopをベースに説明を進めていきます。 Photoshopにはトーンカーブ以外にもいくつかの補正機能が備わっています。中でも使いやすい機能の一つに「明るさ・コントラスト」がありますが、画像の質を低下しやすいデメリットがあります。 また、細かな部分や複雑な画像の補正にも不向きです。これに対して、トーンカーブは視覚、データの劣化をおこさずに細やかな補正ができます。 ト

私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？

（編集部注＊2013年7月1日に公開された記事を再編集したものです。） こんにちは、デザイナーの白浜です。 以前、下記の記事でチャンネルを使って髪の毛を切り抜く方法をご紹介しました。 今回はPhotoshopCS5以降についている便利機能「境界線を調整」を使って髪の毛を切り抜く方法をご紹介します。 結構色んな所で紹介されているとは思いますが、復習がてらお付き合いください。 なかなかのチートツールなので、使わない手はないです。作業が格段に早くなります！ 「境界線の調整」を使って髪の毛を切り抜く方法 パスで大雑把に髪の毛を囲む 今回はなかなかややこしい背景をお持ちのアフロ（ソバージュ？）美女をご用意しました。 このツールのチートっぷりを体感していただきたいのであえて白背景じゃない画像で挑戦します。 まずはペンツールで囲みます。ここはチャンネル使う場合と同じですね。ふわふわしてる部分はおお

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が