マガジンのカバー画像

Futurize Magazine

68
Futurizeのメンバーが投稿したnoteをマガジンにまとめています。
運営しているクリエイター

#UIデザイン

無料のアイコン素材サイトまとめ

1. Font Awesome (SVG) ・有名なWEBアイコン。 ・SVGとしてダウンロードもできるので優秀です。 2. Tabler Icons (SVG) ・サイト上で色や大きさ、太さの変更が可能 ・ダウンロードではなくコピーになるので、そのままsketchとかにペーストすればベクターとして使える ・デザインもシンプルなので使いやすい 3. Feather Icons (SVG) ・線の太さ、色、大きさをサイト上でカスタマイズできる ・SVGでダウンロード可

無料のイラスト素材サイトまとめ

1. unDraw(SVG, PNG) ・割と使ってる人が多いunDraw。サイト上で色も変更できるし素材も豊富なので使いやすい。 ・素材を組み合わせる & 少しパスをいじって、↓のようにオリジナルのイラストを作成することもできます。 2. ISOMETRIC(SVG, PNG) ・アイソメトリックでシンプルなイラスト。これも使いやすいかも。 3. storyset(SVG, PNG, SVGコード) ・色を変更してダウンロードが可能。 ・アニメーションをつけて動か

KPT法で2020年を振り返る

FuturizeでUIUXデザイナーをしています、佐野です。 2020年も終わりということで、KPT(ケプト)法で振り返りをしたいと思います。KPT法は振り返り手法の1つで、「Keep:続けるべきこと、Problem:抱えている問題、Try:次にトライしたいこと」の3つを指しています。 クライアントのミーティングで知ってから、個人的に使っています。シンプルでわかりやすいのでおすすめです👍 最近の業務について振り返る前に、前提となるわたしの業務について一応共有します。最近

初めてサービスのデザインをして1ヶ月でできるようになったこと

Futurizeにきて1ヶ月が経ったのでこれまでの振り返りをしたいと思います。 🚲 1ヶ月間でやったこと 金融サービスのWebサイトのデザイン(PC/SP) 今回は最終的に40数ページのデザインをつくりました! 現在細かい修正や追加のコンポーネントの作成をしています。 戦略や概要のまとめ、競合調査、情報設計MTG、一般的なUIを知ること、先方との目的や優先順位の擦り合わせ、Sketchの使い方、シンボルを使ったデータづくり、納品までの流れの把握などなど‥ 基本的なツール

教えてもらうときに気をつけていること

教わる側と教える側の両方を経験し、今また教えてもらうことが多くなってきて最近感じることをまとめました。 ちなみに自分が2〜3年後になりたい姿を体現している人から教えてもらうのが一番いいと思っています。 方法を具体的に教えてもらいアクションプランにして、より短い期間で実行していくためです。 今回は師匠の見つけ方ではなく、見つけた師匠から学ぶ時の姿勢についてです🗒 たくさんの人がいて時間は限られている中、自分に教えたいと思ってもらうためには何ができるか考えながら読んでいた

Sketchでつくる汎用しやすいテーブル

こんばんは🎆 今年は帰省してないので友達のインスタを見て気分だけ味わってます🎆 今日は、伸ばしたり縮めたり数が増えたりしてもいい感じになるテーブルを秒でつくる方法についてです! ほぼ毎回使うこういう表ですね。 「見出し」と「データ」は見た目が別に見えますが一つのシンボルを使っています。 シンボル化命名規則通りに「lv2: table / th / td」と名前をつけます。 セルの見出しと要素なので、htmlのタグで言う「th」と「td」にしてます。 パーツに分けるとこ

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

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

池田語録

今日はいつも隣の席にいる池田さんの発言特集です👏 デザインチェックでご指摘いただいたことから日常会話まで、特に印象に残っているものをご紹介します🚲 🚴‍♂️ 雰囲気を維持したまま全体に染み渡らせる トンマナについてご指摘もらった時の言葉です。 すごくイメージしやすい! 全体的に親しみやすい少しポップな感じのデザインを作成していましたが、途中で綺麗にまとまりすぎて堅い印象になってしまっていました。 自分で確認する際はこれを思い出してチェックしてます。 🚴‍♂️ 王道がわか

今週の振り返り(グルーピングとシンボルに苦戦中)

こんばんは🐤 もう先週になっちゃいましたが22〜26日の週の振り返りです。 note書いて帰れば更新滞らないのでしばらくそのスタイルで頑張ります…✏️ 今週やったこと ・トップページデザイン制作 ・池田さんチェック後修正 ・先方と認識すり合わせ ・スマホ用にデザイン展開 ・中面ページ2P制作 先方と打ち合わせした内容をもとにデザイン制作に入りましたー! 今回はレスポンシブのWebサイトをつくります。 Webは経験あるものの、Sketchで制作&文字が英語&ページ数多めなの

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

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

Sketchショートカットキー総まとめ

イラレで言ったら何????と思うことが多く まだまだ使いこなせてないのでまとめました。 段組がないのが結構面倒、、 似た機能あるのかな? オリジナルのショートカットはまだ作ってないので、追加していきたいです。 垂直に反転とシンボル化は入れたい。 はやく全部覚えて、いちいち検索しなくていいようになりたいです。 オブジェクトの挿入 R 矩形の挿入 O 円形の挿入 U 角丸四角形 L 線 T テキスト V ベクター A アートボード追加 文字 cmd + B 太字化

現状の疑問と自主勉強計画

今日で最初の一週間が終わりました! 通勤電車が混んでないのが地味に嬉しい😇 特に今週は月曜日が祝日だったこともあり、とにかく短かったです‥! 今感じていることとこれからの計画をメモします🗒 初めてやったこと・お客様とのやりとり ・ラフ作成 ・情報設計MTG ・上記をもとに全体の方向性決め 学び①要件を満たせばOKと考える 相手が伝えたい意図は何なのか理解することに意識を向けがちだということに気づけたのがよかったです。 自分で課題を見つけてお客さんの想像を超える提

Project StepUPスタート

16日から株式会社Futurizeで働きはじめました。 10ヶ月で師匠の池田さんを超えるという挑戦と試行錯誤の過程を記録していきます。 結果の出し方、深さや繊細さのライン、日々どんなことを考えて仕事に取り組んでいるかなど学んだことはすべて共有していくつもりです。 出社してみて最初に感じたのは、みんなめっちゃ自転車好きだな‥ということです🚲 プロジェクトの概要はこちらから きっかけとなぜ学びたいと思ったかきっかけはおそらくTwitterでした。 だれかが池田さん

SketchのSymbolで色や絵柄を簡単に変えられるアイコンを作ろう

こんにちは。 ここ2週間ほどSketchのSymbolの修行をしていました。今回はSymbolを使って色や絵柄を簡単に変えられるアイコンの作り方について書きます。 Symbolはまじで便利Daily UIやCocoda!で1画面のデザインをしている段階ではいらないですが、複数画面を持つサービスのデザインではとても便利です。複数画面の色を変えられたり、規則性のあるキレイな画面を作ることができます。 特に今回のアイコン作成では、次のようなことができるようになります。 ・アイ