生ハム

UI UXのこととか、気まぐれに書きます。2023年1月から株式会社アガルートテクノロ…

生ハム

UI UXのこととか、気まぐれに書きます。2023年1月から株式会社アガルートテクノロジーズの一人目デザイナーとなりました。がんばるぞっ

0からはじめるデザインシステム | タイポグラフィ定義

株式会社アガルートテクノロジーズのデザイナーの生ハムです。 新しくWebアプリをつくるにあたり、以前初めてタイポグラフィを定義した際に考えていたことのまとめと数ヶ月運用してきての反省を踏まえて、改めて文字と行間の大きさについて考えました。 自分用の備忘録として残しつつ、これからデザインシステムをつくる方の参考になればと思います。 タイポグラフィの構成要素まず前提として、サイトで使用するタイポグラフィについて決めなければいけない要素は、Adobe Spectrumに記載されて

生ハム

    • Figmaのvariables機能を利用して爆速で配色を検討する

      こんにちは、アガルートテクノロジーズでデザイナーをしている生ハムです！ 本稿では、Config 2023で発表されたvariables機能を利用してwebサイトなどのデザインの配色検討をしたらすごく楽&時短だったので紹介したいと思います！ バリアブル機能の使い方についての詳細は公式をご覧ください。 バリアブルはモードごとに設定してライトモード/ダークモードなど切り替えられますが、これを配色案として展開してみました。 デザインデータとしては一つしか用意していないですが、

      生ハム

      • データ分析に入門したいデザイナーが最初に読んだ本3冊

        こんにちは、株式会社アガルートテクノロジーズのデザイナーの生ハムです〜！ 表題の通り、データに基づいた意思決定をしてデザインに反映したいと最近思っていまして。ただ、何から始めたらいいものかわからず、とりあえず入門っぽい本を読んでみることにしました。 今回選んだ書籍に期待していた内容は、アナリティクス系のツールなどの使い方というよりは、どのようなデータであれ、正しくデータを収集したり読み取るための基礎知識でした！ 読んだのは以下の三冊です📕📕📕 ①分析者のためのデータ解釈

        生ハム

        • 0からつくるコーポレートサイト | コンテンツ制作からデザインまで

          はじめに自己紹介と経緯 2023年1月から株式会社アガルートテクノロジーズに一人目のデザイナーとして入社しました！前職ではIT業界の受託企業でUIデザイナーをしていました。転職の合間の空白の期間2022年9~10月に、転職先のコーポレートサイトを制作したのでその制作フローなどを自分用の記録も兼ねて公開したいと思います。各工程にかかった工数も記録しておいたので、これからサイトを作る方の参考にしていただければと思います。 アガルートテクノロジーズ コーポレートサイト アガル

          生ハム

        0からはじめるデザインシステム | タイポグラフィ定義

        生ハム

          デザインシステム勉強会を開催してみました。

          社内で週1×4回デザインシステム勉強会を開催しました。短い準備期間で実験的なやり方で進めていたため、他のデザインシステム勉強会をしたいと思っている方々に「これがベストプラクティスです！」とお薦めできる完成品ではありませんが、やり方の一つとして参考にしてもらえればと思い公開いたします。 自己紹介主にウェブの運用/開発をやっている受託企業のUIデザイナーとして、担当クライアント様のECサイトリニューアルプロジェクトに従事しています。産休育休で1年ほどお休みし、2021年12月に

          生ハム

          デザインシステム勉強会を開催してみました。

          生ハム

          UIデザインこれまでのトレンドと、2021年以降に流行る(かも)『Glassmorphism』

          こんにちは、UIデザイナーの生ハムです。今回は2021年以降に流行るかもしれない(流行らないかもしれない)UIデザイントレンド『Glassmorphism』をご紹介します。 その前に、ざっくりですが(主にスマホの)UIデザインのトレンドをおさらいしておきたいと思います。どのトレンドも現在もいろいろなところで使用されており語るところは多々あるかと思いますが、新米デザイナーが調べて理解した程度の、あくまでも大雑把な流れとしてご了承ください。 2007年頃~ 初期のiPhone

          生ハム

          UIデザインこれまでのトレンドと、2021年以降に流行る(かも)『Glassmorphism』

          生ハム

          ベースラインを調整してSketchでヒラギノを使う

          こんにちは。SketchやFigmaを使用してUIデザインをしている生ハムです。今回、いろんな日本語を扱うSketchユーザーが助かりそうな機能やプラグインを知ったので紹介します。 Sketch日本語フォント余白問題みなさん、Sketchでヒラギノなどの日本語フォントを使用したいときどうしていますか？Sketchを使用して日本語のUIを作成している方、一度は「テキスト上部に空白ができてしまう」問題に直面したことがあるのではないでしょうか。 (font-size:16、li

          生ハム

          ベースラインを調整してSketchでヒラギノを使う

          生ハム

          待ってました！Sketchの新機能"Smart Layout"

          先月9/17にリリースされたSketch ver58において"Smart Layout"というナイスな機能が実装されましたので、新機能の使用感をまとめてみました。 使い方の公式ドキュメント(英語)はこちら👈 【Smart Layout機能】Smart Layoutを設定すると、シンボルのoverrideを変更した際にマージンやサイズを守ったままコンポーネントがリサイズされます。 細かく設定が必要なので少しデータ構成が少し複雑になりますが、 ↓のようなデータを用意して

          生ハム

          待ってました！Sketchの新機能"Smart Layout"

          生ハム