この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインツール 2. モックアップツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. アイコン素材パック 6. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる

こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー

アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

By Tim Franklin Photography マーケットリサーチアナリストとして働き、SEOやPPCのスペシャリストであり、かつ心理学をたしなんでいるというニック・コレンダさんが、心理学の視点から導き出した「コンバージョン率を劇的にアップさせるための30の心理作戦」を公開しています。「フムフム、なるほど」というものから、「恐ろしあ……」となる戦略まであり、広告運用やSEOの知識がない人もサービスを使うユーザーとして知っておくべき内容になっています。 Conversion Optimization: An Enormous List of Psychological Tactics http://www.nickkolenda.com/conversion-optimization-psychology/ 30の戦略を見る準備として、運営しているサービスをCTA別に分けてじょうご状

デザイナーのベーコン（@dogdog464646）です！！ プレゼン資料作りにも役立つ、デザイナーがついつい使ってしまうフォント4つを選んで解説しました！ 「フォントにお金を出すのはちょっと…」という方のために無料フォントを紹介します。 いいフォントを使うと明らかにデザインが締まりますので、新しいフォントにチャレンジしてみてくださいね。 １つめ『DSきりぎりす』 (DS-kirigirisu) 「DSきりぎりす」このフォントはすごいです。 ポケモンで言ったらポッチャマ。GLAYで言ったらTERU。ドラゴンボールで言ったらベジータ。つまりスーパーヒーロー！2016年もまだまだ色んな所で使われていますね。 ▼DSきりぎりす (DS-kirigirisu) (¥16,500 ） こんな感じで使われている ●コンビニ各社で使われている ファミマのクッキーエッグタルト。あっちこっちきりぎりすフォント

英文の速読術には、スキミング・スキャニングと呼ばれる技法がある。 スキミングとは「ざっと一覧して、全体を把握する」こと。各章のタイトルや、パラグラフの一文目、最終のまとめなど、要所要所だけをかいつまんでいく読み方だ。 一方、スキャニングは「特定の部分を熟読する」こと。こちらは一転して、一単語ずつ精査していく読み方である。 まず最初に全体をざっと見て（スキミング）、自分に必要な内容があるかをチェックする。その後に、必要な部分だけを選別してじっと見て（スキャニング）いく。英文速読では、この２つの読み方をペアにして扱う。つまり速読術とは全文を素早く読むことではない。細部を無視して、要点だけを拾い上げていく技法なのである。 この英文速読術の技法、スキミングとスキャニングは、画面の情報設計の大きなヒントとなる。情報を効率良く読むテクニックが確立されているのなら、それをロジック化すればよい。ロジックを

実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f

弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー

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

デザインの大きなエリアを空っぽのままにしておくことを心配しないでください。この例では「Origami」のタイトルの上下のエリアに空白スペースを適用しています。 意図的に使われた空白スペースは、強いフォーカスを作り、デザインに呼吸するスペースを与えます。 不必要な要素を取り除く 空白スペースを作る一つの方法は、デザインで不必要な要素を取り除くことです。右のグラフィックのように、ボーダーを取り去ることはデザインを広げます。ボーダーや形やアイコンなど、あなたが使う要素がそのデザインに価値を加えるものであるか確認して使用してください。 コピースペースには十分な空白を

2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ

こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot

Please update your browser It seems you are using an old or unsupported browser. To continue enjoying Canva, please update to a recent version of one of the following browsers:

2014年、チェックしておきたいUIデザインをdribbbleから紹介します。 高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。 2014年を振り返りつつ、来年はどんな素敵なデザインが生まれるのか楽しみですね。 GIF for the Weather App まずはUIの動きも楽しめるシリーズ。リンク先ではGIFアニメーションで動いています。 お天気アプリのコンセプトで、一日の天気をアコーディオン型のパネルで楽しく見せます。