誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
UI上のラベルや説明文をどこにどれくらい書くべきか - hitode909の日記
インタラクションのあるUIを作っていると、UIパーツのみからは挙動を読み解けない場合があって、そういうときには、一言説明を添える、ということをやる。 こういうときに、どこにどれくらいの説明があれば必要かつ十分か、ということを学べる機会はあまりない気がする。 アルバイト氏のPull Requestのレビューをしていたら、これだと何が起きるかわからないので説明を添えたいよね〜って話をしていたのだけど、そういえばこういうことはどこで学べるのだっけ?というのが気になってきたのだった。 ブログチームでブログを作っていた頃には、編集メンバーが画面のレビューをしてくれて、ここのUIの文言はこれくらいのことを書けば必要かつ十分で、ヘルプの言い回しや告知とも整合性が取れてよいのではないでしょうか、みたいなことを一緒に考えてくれていて、勉強になっていた。 ブログのサイドバーから、説明文を消し去ると、フォームに
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。 本記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ -
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
「可愛くしてください！」「おしゃれにしてください！」それは具体的にどうすれば？クライアントからのふわっとした要望に応えるデザイン書
クライアントから「可愛くしてください！」「おしゃれにしてください！」「かっこよくしてください！」「企業イメージ出してください！」 デザイナーなら誰もがそんな要望を受けたことがあると思います。 そんなふわっとしたリクエストや要望、赤字に応えるためのデザインの修正方法・テクニックを解説したデザイン書を紹介します。 本書は、今年も快進撃が止まらないソシム社の新刊。 またもや興味深い、面白い書籍の登場です！ 今回はデザインの何かに特化して学ぶ的なものではなく、デザインの方向性、修正・手直しの方法を解説した一冊です。リクエストや赤字の具体例が数多く掲載されており、「あるある！」と心の声で叫びながら、デザインを楽しく学べます。
少佐@Neetpia -幻想戦略録- on Twitter: "先日話したプログラマでもできるUI素材の作成方法についてまとめました！原色赤緑MSゴシックのHPバーもちょっとの工夫でおしゃれなHPバーになります。是非とも参考してみてください！ https://t.co/uFmBIUhmLf"
先日話したプログラマでもできるUI素材の作成方法についてまとめました！原色赤緑MSゴシックのHPバーもちょっとの工夫でおしゃれなHPバーになります。是非とも参考してみてください！ https://t.co/uFmBIUhmLf
ウェブ・アプリエンジニアのためのFigma入門 (1) Figmaを使うわけ | さくらのナレッジ
FigmaはWebブラウザ上で動作し、複数人同時で編集が可能なデザインツールです。 従来UIデザインの分野ではSketchやAdobe XDといったツールが使われてきました。そういったデザインツールの分野にFigmaは複数人同時編集・Webアプリという特長を活かし登場しました。現在は5000万ドル以上の資金を調達するに至る、極めて注目度の高いツールに成長しています。 本連載ではUIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニアに向けに注目度の高まっているFigmaを導入すると嬉しい理由と使い方をお伝えします。 連載の一本目である本記事では、なぜFigmaを使うのか・今までのツールと何が違うのか？という点を重点に解説します。 対象読者 UIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニア デザインファイルの管理で困っているエンジニア・デザイナー Fi
ウェブ・アプリエンジニアのためのFigma入門 (2) Figmaのキホン | さくらのナレッジ
前回はFigmaを使うべき理由を説明しました。連載の2回目となる本記事では、Figmaの基本的な使い方を説明します。 今回の記事ではデザインツールを使ったことのない人向けに知ってほしいこと、Figmaの画面説明やレイヤーの設置・編集方法といったFigmaでUIモックを作るための機能について説明します。 SketchやAdobe XDのようなデザインツールの基本的な使い方に慣れている方は、この記事を飛ばして次回の記事を読み進めることをおすすめします。 UIモックを作るにあたって 本連載は主にソフトウェアエンジニアを対象にしています。そこで、UIデザインツールを使ったことのない人に知ってほしいことをお伝えしておきます。 基本的に（凝ったデザインでなければ）UIモックはシェープとテキストといったレイヤーで構成されています。シェープは四角形や円形などの形状をもつもの、テキストは文字通り文字を示して
ドラッグ＆ドロップで利用できるデザインツール「Canva」で、はてなブログのタイトル画像が作れるようになりました - はてなブログ開発ブログ
デザインツール「Canva」が、はてなブログのタイトル画像作成に対応しました。専用ソフトや技術がなくても、どなたでも簡単にタイトル画像を作成できます。 Canvaで作成したタイトル画像のイメージ Canvaは、テンプレートや画像素材をドラッグ＆ドロップで編集できる、無料のグラフィックデザインツールです*1。ポスターやロゴ、名刺などさまざまなフォーマットに対応しており、誰でも簡単にデザイン作業が行えます。GoogleやFacebookアカウント、メールアドレスによる会員登録でご利用可能です。 Canvaのトップページ ご利用方法 1. まずは、Canvaのトップページからログイン（アカウントをお持ちでない場合は登録）をしてください。 2. ログイン後、トップページの検索フォームで「はてなブログ」と検索し、「はてなブログ Epic ヘッダー」をクリック。 ログイン後のトップページ 3. 以下の
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
デザイナーがスタートアップをつくり、EXITするということ
2012年に日本初のフリマアプリ『フリル』をつくって6年、2016年に楽天にEXITしてもうすぐ2年が経とうとしている。少し時間ができたので、その間に学んだ色々なことを書き残しておこうと思う。 まずは僕自身の経験を通して、デザイナーが「スタートアップを創業する」というキャリア選択について記したい。これは起業を勧めるものではなく、あくまで個人的な手記ではあるけれど、学生や若手デザイナーの参考になれば嬉しい。 目次1. 新しいキャリアの選択肢 2. スタートアップの魅力 3. 創業時に必要なこと 4. どんなことをやっていくのか 5. EXITのあとで思うこと この記事は移転しましたnoteから独自ブログに移行しました！記事の全文は👇のページでお読み頂けます。
トップレベルのUXを学ぶため『THE GUILD』に求めた成長の場。27歳のデザイナーが抱いた危機感 | キャリアハック（CAREER HACK）
日本最高峰とも言われるUI・UXデザインチーム『THE GUILD』。2018年1月、新たなメンバーが加わった。Eコマースプラットフォーム『BASE』のアプリをデザインした人物、三古達也さん（27）だ。このキャリア選択の背景には「新たな環境で、もう一度修行したい」という強い思いがあった。 事業グロースまで担えるデザイナーへと成長するために｜THE GUILD 三古達也 UI・UXの世界において、その名を知られる『THE GUILD』。日本を代表するUXデザイナー、深津貴之さんが率いるクリエイティブチームだ。 2018年1月現在、THE GUILDに所属するデザイナー、エンジニアは約15名。ユニークなのが、複数の会社・フリーランスが集まって結成された組織だというところ。THE GUILDに来た依頼には、その都度内容に応じて最適なメンバーがアサインされ進められていく。彼らはまさに、次世代型のコ
デザインのバージョン管理をGitHubでしてみたら修正点が3秒で分かるようになった話 - Money Forward Developers Blog
こんにちは。デザイナーの大橋です。 今日は、私が担当している “（しら）ずにお金が（たま）る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。 デザインのバージョン管理といえば、AbstractやKactusがありますが、今回はあえてGit Sketch Pluginを試してみました。 デザインデータをGitHubで管理しようと思ったキッカケ 私以外のチームメンバーがみんなエンジニアだから、間違いなくGitHubに寄せたほうが効率いいんじゃないか。 新しいツールを導入すると、プロジェクトに関する情報が分散してしまいがちで、エンジニアも招待したり登録してもらったりしなきゃいけないのかなという印象。※あくまで印象です。 Kactusはプライベートレポジトリが有料。 こんな感じでなんかファイルが増えてく。。。(忙しいと放置しがちでよくない。。 GitHub
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Slideland | スライドデザイン集
Adobe製品と同じような事をフリーソフトでやりたい場合の対応表がすごく使える→他にも高機能なフリーソフトが集まる
TechCrunch
画像を漫画やアニメ用の線画に変換する『Line Drawer』| cre8tiveAI
あなたはデザインを見る目と判断する知識を備えているか、勉強にもなるUIデザイン検定問題 -Can't Unsee
“表紙あるある”の知恵がこのタグに集結！ #それっぽくなる表紙 - Togetter
今日からはじめるデザインレビュー
