アオキタカユキ

iCARE Design Department Manager / UI Design…

アオキタカユキ

iCARE Design Department Manager / UI Designer | 働くヒトの健康を世界中に創り出すをパーパスに、健康管理システムCarelyのUIを設計してます。

デザイン部マネージャーから降格して、一から出直し、またマネージャーに戻った話

どうもiCAREデザイン部マネージャーの青木です。iCARE Devアドベントカレンダー4日目。今年もあと1ヶ月を残すのみとなりました。毎年言ってますが本当に月日が過ぎるのが早いですよね。振り返ると今年も色々なことがありました。 今年、ふりかえる まずはデザイナー部としての独立。組織として横断的にクリエイティブをする必要がでてきましたので、それぞれ別部署に所属していたUIデザイナーとコミュニケーションデザイナーを集めてiCAREデザイン部を立ち上げました。現在の組織体制に

アオキタカユキ

    • 【adobe XD】アセット整理用のパス表示【XD50】

      どうも皆様御機嫌いかがでしょうか？今回は「アセット整理用のパス表示」する方法です。要はアセットの整理が「/(スラッシュ)」を使うことで簡単にフォルダを作成して整理できちゃうよ！ってことです。 煩雑化しやすいアセットですがこういう整理する機能がラクだとメンテナンス性もあがって運用しやすくなるので大変助かります。 せっかくなので使用しているコンポーネントファイルを使ってご説明いたします。下の画像のようにバッチをパーツフォルダの中のバッチフォルダとしてまとめることをゴールとします

      アオキタカユキ

      • 【adobe XD】XDにテキストハイパーリンクを設定する方法【XD49】

        どうも皆様御機嫌いかがでしょうか？今回は「XDにテキストハイパーリンクを設定する方法」をする方法です。ウェブ関係者の皆様にはお馴染みの「ハイパーリンク」。クリックするとウェブページに飛ぶあれです。そんなハイパーリンクをXDに埋め込めることが出来るんです。 いままではデザイン内にリンク先の指示は残しにくかったけど、直接XDファイルに残せるのでより直感的にデザインできますね。 ウェブデザイン以外にも資料作成でXDをつかっても便利そうですね。 せっかくなのでウェブサイトのトッ

        アオキタカユキ

        • 「考え」のデザインと「カタチ」のデザイン

          この記事は「これからのデザイン経営」を読んで、とくに感銘を受けた「考え」のデザインと「カタチ」のデザイン部分を自分だったらどう解釈する？どのように業務に落とし込める？といった箇所をまとめたものです。 二つのデザイン ここでいう「考え」のデザインとはパーパスやビジョンといった、「なぜこのプロダクトは必要なのか？」を表したもの。もう一方の「カタチ」のデザインとは「ウェブサイトやUIといった目に見える」ものです。 片方だけではデザインじゃない ウェブデザイナーとして働いてお

          アオキタカユキ

        デザイン部マネージャーから降格して、一から出直し、またマネージャーに戻った話

        アオキタカユキ

        マガジン

        • 健康
          1本

        記事

          【adobe XD】XDだけで画像をボカす方法

          お疲れ様です、どうもアオキタカユキです。 今回はXDだけで画像をボカす方法をご紹介シたいと思います。ぼかしって以外と使ったりするんですよね。ぼかした背景の上にテキストを重ねて奥行きをだしてリッチにさせたり、アンフォーカスな表現につかったり何かと使用頻度は高いとです。 この方法を知る前まではPhotoshopでボカした画像を作成して入れ込んでましたけどそんな必要はなくなりますね！ まずはこのようなデザインをご用意 続いてぼかしたい画像を選択 すると右下に「オブジェクト

          アオキタカユキ

          【adobe XD】XDだけで画像をボカす方法

          アオキタカユキ

          【adobe XD】プラグインを使わないで遷移図を表示しよう

          開発にあたり画面の遷移を示す図、遷移図ってとっても大事ですよね。フロントエンジニアやサーバーエンジニアにデザインを引き継ぐ際に重宝します。これがないとどの画面がどこに繋がっているか分からりずらいので開発をスムーズに進めるためにも必要です。またデザインにおいても足りない画面がわかるので抜け漏れがないか確認するのも使います。 どうやって表示するの？以前まではXDには遷移図を表示する機能がありませんでした。プラグインを利用することで遷移図を作成していたのですが、さすがはadobe

          アオキタカユキ

          【adobe XD】プラグインを使わないで遷移図を表示しよう

          アオキタカユキ

          【Photoshop】「カラーの適用」でトーンの違う写真を簡単に調整する方法

          どうもアオキタカユキです。ウェブサイトには色々な写真を掲載します。晴れのときのあれば曇りのときもある。朝一番にとった写真もあれば夜にとった写真もある。それを一つ一つ写真を補正していくとかなりの時間とスキルを必要とします。せっかくとった写真素材なので丁寧に調整を加えていきたいですが、なかなかそのような時間はとれないですよね。そこで今回はPhotoshopで簡単にトーンをあわせる方法をご紹介します。 こういうトーンの違う写真の雰囲気を統一しています まずはこちらの写真をごらん

          アオキタカユキ

          【Photoshop】「カラーの適用」でトーンの違う写真を簡単に調整する方法

          アオキタカユキ

          【adobe XD】プロトタイプでスクロールを表現する方法

          どうもアオキタカユキです。iCAREではUIを作成する際にはAdobe XDを使用してます。とてもシンプルなツールなので直感的に操作しやすく、URL共有などチームで作成する際の便利な機能がついているのでとっても重宝しております。とはいえfireworksなんかでウェブデザインをしていたようなおじさんデザイナーだと新機能を無視して使っておりました。最近知ったんですがプロトタイプでスクロールを表現できるって知ってました？もちろん私は知りませんでした。。。そこで今回はプロトタイプで

          アオキタカユキ

          【adobe XD】プロトタイプでスクロールを表現する方法

          アオキタカユキ

          デザイナーとエンジニアが一体となって組織力を上げる方法

          ウェブ系の開発をする上で欠かせないのが、UIデザインをおこなうデザイナー。動的な開発をおこなうサーバーサイドエンジニア。デザインからウェブに画面をおこすフロントサイドエンジニア。一つの開発をするのに３種類のクリエイターが登場してきます。同じウェブ開発を仕事にしているとはいえスキルも考え方も全くちがいます。齟齬が原因で余計な作業がうまれてしまったり効率よく開発がすすまない問題もでてきやすいです。 それを解決するためにiCARE開発でも常に意識してその問題に取り組んでいます。そ

          アオキタカユキ

          デザイナーとエンジニアが一体となって組織力を上げる方法

          アオキタカユキ

          カンパニーカルチャーをデザインするメリット

          社内での文化を育てる、または定義を作ることは容易ではありません。 また文化育成に関して積極的におこなっている会社はそう多くはないかとおもいます。コストも掛かるし時間もかかる。その割に効果を定量的に表すことができない文化育成。一見無駄に思えてしまいがちですが、ここにこそ中長期でのスケールアップに必要な鍵があると考えています。「文化育成」とはなにか？それによって得られるメリットを考察してきます。 カンパニーカルチャーとはなにか？ まずはカンパニーカルチャーとはなにか？ここで

          アオキタカユキ

          カンパニーカルチャーをデザインするメリット

          アオキタカユキ

          エンジニアでもなんか洒落ている資料が作れるデザイン方法 -シンプル編-

          こんにちは、アオキタカユキです。資料って意外と作成する機会っておおいですよね。デザイナーとして働いているわたしですがデザインと同じ位の時間を資料作成に費やしております。ワイヤーフレームや要件資料はもちろんなんですが、社内用の機能説明用資料やトイレの張り紙など様々です。（トイレの張り紙を作成するのがデザイナーの仕事かわかりませんがこういうの好きなので） そこで資料作成大好きおじさんであるこの私が長いサラリーマン人生のなかで見つけ出した「簡単」「手軽」「かっこいい」資料作成術を

          アオキタカユキ

          エンジニアでもなんか洒落ている資料が作れるデザイン方法 -シンプル編-

          アオキタカユキ

          UI/UXをユーザーテストで改善してみようの巻

          UI/UXデザイナーとして避けられない道、、、それはユーザーテスト！！！手離れが良いほうが良いに決まってるじゃないですか？どうせだったら新機能をバンバン作ったほうが楽しいじゃないですか？？いやいやちょっとまってください。自社サービスの面白さって「育てる」ことにありますよね。なのでユーザーテスト手法をもちいて効率良く、最善な育て方を見極めていこうというお話です。私自身良くわかっていなかったのでGoodpatchさんの記事を参考にいたしました！ そもそもユーザーテストってなんぞ

          アオキタカユキ

          UI/UXをユーザーテストで改善してみようの巻

          アオキタカユキ

          ジェスチャー操作の「いままで」と「これから」を考えてみる

          ジェスチャー操作ってなに？ここでいうジェスチャー操作というのは直感的な動作で端末を操作することをさしております。つまり皆様が普段おこなっている「スワイプ」や「ピンチ」や「強くおす」操作のことです。スワイプすればページが「めくれる」し、ピンチすれば地図が「拡大」するし、強く押し込めばより詳細な情報を「押し出して」くれ、様々な結果をユーザーにもたらしてくれます。 結果は行動が必ずともないます。つまり「本を読む」という結果は「ページをめくる」といった行動がない限り得られません、ジェ

          アオキタカユキ

          ジェスチャー操作の「いままで」と「これから」を考えてみる

          アオキタカユキ