デザイン関連で参考にしたnote｜ようらん

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない

強弱のデザイン #デザインの引出し

Rettyでデザイナーをしているヤマモトマユミ(@mayya)です。一緒のチームのデザイナーから「ヤマモトさんは普段デザインについて話していることを発信した方がいい！」と強く言われまして、身近な人に話したデザインについての考え方やデザインの引き出しについて、ゆるりと書いていければなと思い、今筆を取っています（正しくはPCのキーボードを叩いています）今日は、そんな一緒のチームで働くデザイナーに話した「強弱のデザイン」について書こうと思います。強弱のデザインパターンをつく

Sketchで大活躍のショートカット集

僕は『Sketch』をUIデザインツールとして業務利用しています。 Sketchにはたくさんのショートカットが用意されていますが、「とりあえず実務上はこのあたりさえ使っておけばUIデザイン業務はそこそこ作業スピード出せるよ」というものをまとめました。図形の挿入左上から選択・・　とかやってると遅いです。キーボードで一文字打つだけですし、これは覚えましょう。もし忘れてしまった時も、Insertメニューにヒントが表示されています・四角形：R（Rectangle）

Material Designを最速で使いこなす

Material Designを使いこなすための最速の手順を紹介します。最近UIデザインを始めた方、iOSアプリのデザインはしていたけどAndroidのデザインも行う必要になった方、WebサービスでMaterial Designを使ってみたい方、Androidエンジニアでデザイン方面ももっと知りたい方などは参考にしてみてください。 Material DesignとはMaterial DesignとはGoogleが構築したUIデザインフレームワークです。Androidだけでな

スタートアップの1人目のデザイナーへ

どんな組織・状況・職種であれ、1人目でjoinするというイバラの道をあえて選択できる人は、失敗しても困らない状況や能力のある人か、目標や志を高く持っている人か、もしくはネジの外れたクレイジーな人のどれかです。僕は能力があったとは言えないけど、どこでもやっていける自信はあったし、ネジがたくさん外れていたおかげで、最悪失敗したとしても死なないから大丈夫だろうとくらいに考えていました。志だけは高く掲げていたかったので、1人目としての使命感を強く意識して入社しました。特に言語

もう迷わない！ Sketch シンボルの命名規則

先週からずっとシンボルと戦っています🌨 はやく完全理解したい！特に最初のころはシンボルの名前を何にしたらいいかで色々迷いました。これは正解なんだろうか…？と疑問を持ちながら進めるともったいないので、教えてもらった命名規則を共有していきます。ルールを決められるところは決めてデザインに集中しましょうー！プラグイン導入まずはシンボルを整頓できるプラグインの「Symbol Organizer」を入れます。 Configure Symbol Organizerを開いて

実務で使えるSketchデータの作り方

デザイナーの吉田です🎈 今日は実際に仕事でデザインをする中で教わった、運用しやすいデータについてまとめます。もっと効率よくデータを作れるようになりたい人必見です👀 ルールを決めて守る＆整理整頓ページを整理アートボードは1ページに全てまとめず、それぞれ見出しをつけて内容ごとに整理しています。まだ途中ですがこんな感じ 🐤 General：トップやメインページ 📝 Detail：詳細ページ ⚙ Others：404ページやプリバシーポリシーページ

エンジニアとデザイナーの間で共通の言語で話せるということは大事だと思う

※前に別のブログで書いたものを少しだけリライトした内容です。クラスメソッドさんのブログを読んで、あーためになると思ったのでこれから iPhone アプリ開発に携わるのであれば覚えておきたい最低限のこと開発現場でエンジニアとデザイナーの間で、同じもののことを指しているのに別々の呼び名で呼び合っていることってありませんか？伝える→脳内変換→作ってみたら違った…？！例えばデザイナーの方が○○で実装して欲しいとエンジニアに伝えたとします。エンジニアは○○を実装するために

独学でUIデザインを勉強する方法を自分の経験をもとに考えてみた

こんにちは。今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的このステップはUIデザインに関する前提を知るためにありま

Twitterアプリをトレース＆ガチ考察してみた

UIデザインの練習として、Twitterアプリのトレースをしたのですが、ググってみると「Twitterアプリをトレースしてみたよ！」という記事が山のように出てきました。普通にトレースしてもなんの面白みもないですし、誰にも負けたくないので、自分なりの“ガチ考察”で、自分のインプット量を増やそうと考えました。それではいきましょう。（この記事を読んでいただいた先達さんで「それはちげえぞ！」と思った箇所がありましたら、コメント欄やTwitterのリプライにてツッコんでく

今週の振り返り（全体を俯瞰して見れるようになりたい）

こんばんは。池袋の駅で永遠と将棋をしているおじいちゃん達を見て、生涯続けられる趣味っていいな〜と最近よく思います。読書は老眼でつらくなるかもしれないので他になんかいいやつないか探し中です🙃 さて！今週も一週間の振り返りをしたいと思います。今週やったこと・デザインチェック・先方と認識すり合わせ・中面ページのデザインの続き先週の続きのデザインを進めています。ようやく終わりが見えてきました！学び・改善点制作に入る前にラフを整理＆不明点を確

UIのお作法。28個の「〇〇できそう感」をまとめました。

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。１、進めそう感時間の流れは左から右に表現します。右矢印は次、進む、未来を指すことが多いです。２、戻れそう感左矢印は前、戻る、過去を指すこと

1年間毎日グラフィックを作ったので、お気に入りを紹介します

はじめまして。まちこといいます。長崎の小さな会社でインハウスのweb/グラフィックデザイナーをしています。最近まで個人でOne Designという屋号で同人誌の表紙デザインを受注したりもしていました（現在は新規受付はお休み中）。昨年の7月から自分が好きな曲をテーマにしたグラフィックを毎日作る「絵日記代わりのグラフィック」という取り組みを行っていて、今年の7/25で無事365日間の制作・投稿が終了したので初めてnoteを書いてみようと思いました。作品の一覧はInsta

デザイナー志望の学生必見！現役デザイナーはポートフォリオのココを見ていた

こんにちは、Goodpatchライターインターン生のかずです。学生がデザイナーを目指して就活やインターンに参加する際に、必ず提出が求められるといっても過言ではない「ポートフォリオ」と呼ばれる作品集。僕もUI/UXデザインに本格的に興味を持ち始めた3ヶ月前、各社インターンを受けるにあたり、知識も実績もないところから1ヶ月でポートフォリオを作りました。今回は、僕含め「ポートフォリオの作り方がイマイチ分からない...」「選考においてポートフォリオのどういうポイントが見ら

デザイン関連で参考にしたnote

記事一覧