Adobe製品と同じような事をフリーソフトでやりたい場合の対応表がすごく使える→他にも高機能なフリーソフトが集まる紹介されているフリーソフトは企業が無償提供しているものや信頼性の高い老舗のフリーソフトですが、野良フリーソフトの中にはウイルスを感染させる目的のものもあるので、信頼できる企業のもののみを使うか、野良フリーソフトはダウンロード前に評判をネットで十分検索することをオススメします。
UI上のラベルや説明文をどこにどれくらい書くべきか - hitode909の日記
インタラクションのあるUIを作っていると、UIパーツのみからは挙動を読み解けない場合があって、そういうときには、一言説明を添える、ということをやる。 こういうときに、どこにどれくらいの説明があれば必要かつ十分か、ということを学べる機会はあまりない気がする。 アルバイト氏のPull Requestのレビューをしていたら、これだと何が起きるかわからないので説明を添えたいよね〜って話をしていたのだけど、そういえばこういうことはどこで学べるのだっけ?というのが気になってきたのだった。 ブログチームでブログを作っていた頃には、編集メンバーが画面のレビューをしてくれて、ここのUIの文言はこれくらいのことを書けば必要かつ十分で、ヘルプの言い回しや告知とも整合性が取れてよいのではないでしょうか、みたいなことを一緒に考えてくれていて、勉強になっていた。 ブログのサイドバーから、説明文を消し去ると、フォームに
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ - paiza times
どうも、まさとらん（@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デザイン入門的な記事を書いていこうと思
“表紙あるある”の知恵がこのタグに集結！ #それっぽくなる表紙 - Togetter
🐕️ @54jpd09 今まで作った表紙だが… 一枚目：絵に文字を重ねて後は揃えとけ 二枚目：正方形で揃えとけ 三枚目：タイトル斜め、写真はぼかしてりして効果的にしとけ #それっぽくなる表紙 pic.twitter.com/SOOvvkYgFH 2018-10-24 21:34:52
デザイナーがスタートアップをつくり、EXITするということ
2012年に日本初のフリマアプリ『フリル』をつくって6年、2016年に楽天にEXITしてもうすぐ2年が経とうとしている。少し時間ができたので、その間に学んだ色々なことを書き残しておこうと思う。 まずは僕自身の経験を通して、デザイナーが「スタートアップを創業する」というキャリア選択について記したい。これは起業を勧めるものではなく、あくまで個人的な手記ではあるけれど、学生や若手デザイナーの参考になれば嬉しい。 目次1. 新しいキャリアの選択肢 2. スタートアップの魅力 3. 創業時に必要なこと 4. どんなことをやっていくのか 5. EXITのあとで思うこと この記事は移転しましたnoteから独自ブログに移行しました！記事の全文は👇のページでお読み頂けます。
トップレベルのUXを学ぶため『THE GUILD』に求めた成長の場。27歳のデザイナーが抱いた危機感 | キャリアハック（CAREER HACK）
事業グロースまで担えるデザイナーへと成長するために｜THE GUILD 三古達也 UI・UXの世界において、その名を知られる『THE GUILD』。日本を代表するUXデザイナー、深津貴之さんが率いるクリエイティブチームだ。 2018年1月現在、THE GUILDに所属するデザイナー、エンジニアは約15名。ユニークなのが、複数の会社・フリーランスが集まって結成された組織だというところ。THE GUILDに来た依頼には、その都度内容に応じて最適なメンバーがアサインされ進められていく。彼らはまさに、次世代型のコレクティブ組織といってもいいだろう。 同時に、多岐にわたるプロジェクトへと対応していくため、チームも拡大。その社員としてチームに加わったのが、今回取材した27歳のデザイナーである三古達也さんだ。 三古さんは、Eコマースプラットフォーム『BASE』を運営するBASE株式会社でデザイナーとして
デザインのバージョン管理をGitHubでしてみたら修正点が3秒で分かるようになった話 - Money Forward Developers Blog
こんにちは。デザイナーの大橋です。 今日は、私が担当している “（しら）ずにお金が（たま）る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。 デザインのバージョン管理といえば、AbstractやKactusがありますが、今回はあえてGit Sketch Pluginを試してみました。 デザインデータをGitHubで管理しようと思ったキッカケ 私以外のチームメンバーがみんなエンジニアだから、間違いなくGitHubに寄せたほうが効率いいんじゃないか。 新しいツールを導入すると、プロジェクトに関する情報が分散してしまいがちで、エンジニアも招待したり登録してもらったりしなきゃいけないのかなという印象。※あくまで印象です。 Kactusはプライベートレポジトリが有料。 こんな感じでなんかファイルが増えてく。。。(忙しいと放置しがちでよくない。。 GitHub
UIトレースの具体的手法と、そこから得た学び - Qiita
UIトレースをするといいよ、という話は聞く1ものの、Sketch初心者かつエンジニアの私にとってはそのトレースのやり方がいまいち分からなかったりしたので、この記事ではドットインストールのエンジニアのためのSketch入門をやった直後の私がTwitterのタイムライン画面をトレースする過程、得られた知見、上記講座では紹介されていなかったけど覚えておくと便利なテクニックなどを紹介します（なので講座を見ればわかるようなSketchの使い方の部分は省きます）。 ちなみに最終的に出来上がったものはこちらになります。左が本物、右がトレースしたものです（鍵アカのツイートはないとはいえ、自分のページのスクショにすれば良かったと思ったりもした）。 一見ある程度できているように見えますが一番下の通知マークなどを拡大すると滑らかさがないのがわかります。あと今回フォントは細かく見れていません…。 所要時間は、ちゃ
プロダクトデザインの訓練に、ホワイトボードチャレンジをしてみよう！ - 灰色ハイジのテキスト
こんにちは、灰色ハイジです。 私が在籍しているサンフランシスコにあるプロダクトデザイナー養成所「Tradecraft」では、座学だけでなく手を動かして問題解決に挑むカリキュラムがたくさんあります。そのうちの1つがこの「ホワイトボードチャレンジ」です。 目次 ホワイトボードチャレンジって？ 全体の流れ Step0: 準備 Step1: 問題を理解する（5分） Step2: アイデアを具体化する（14分） Step3: まとめる（1分） 参考記事＆便利ツール 最後に ホワイトボードチャレンジって？ ホワイトボードチャレンジは、選ばれたお題に沿って、「クライアント役」からのヒアリングからスケッチまでを、「デザイナー役」の人が20分間で行うUX/UIデザインの訓練方法です。 デザイナーだけでなく、プロダクトに関わる人全員の問題発見能力とヒアリング、デザインについて伝えるスキルを鍛えるのに役立ちます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
画像を漫画やアニメ用の線画に変換する『Line Drawer』| cre8tiveAI
あなたはデザインを見る目と判断する知識を備えているか、勉強にもなるUIデザイン検定問題 -Can't Unsee
今日からはじめるデザインレビュー
