Wizマガジン｜Wiz Creative｜ワイズクリエイティブ

【制作実績】えらべる保険

こんにちは！大阪でUI/UXデザイナーとして働いているミヤザワです。今回は、弊社のサービス「えらべる保険」という保険比較サイトのデザインを担当したので少しご紹介させていただきます。サイト概要公開サイトURL https://ins.eraveru.jp/ 「えらべる保険」とは保険のお悩みをFP（ファイナンシャルプランナー）に無料で相談できる保険比較サイトです。また目的・種類に合わせた記事も掲載しており、保険に関する疑問や情報を見つけることができます。

Wiz Engineer 技術共有会　10月第1週

弊社では週に一度、1時間の技術共有会を行なっています。最近のTechなニュースや気になること、仕事の役に立ちそうな情報など、ざっくばらんに共有する会です。条件分岐をなるべく避けようコードリーディングのストレスを軽減する関数から早く返す早期returnできるということはメソッドを分解できている。つまり本来のメソッドのみを簡潔に記入できるため、読み下しやすくなる。ネストは浅くする if分のネストが2階層になった途端一気に読みづらくなる。その場合ひとつ前の話で

レシピアプリのUI/UXを比較してみた

こんにちは！大阪でUI/UXデザイナーとして働いているミヤザワです。最近よく料理をするので、その際に利用しているレシピアプリのUIが気になったので比較しつつ分析していこうと思います🔍 比較サービス①：クックパッド最もポピュラーなサービスの1つであるクックパッド。1500万人を超えるユーザーを持つ大きなレシピアプリです。比較サービス②：クラシルこちらも多くの方が利用されているであろうレシピアプリ、クラシル。動画で手順を確認できるのが特徴です。38,000以上のレシピ

「Spotify」のUI/UXについて分析してみた

こんにちは！大阪でUI/UXデザイナーとして働いているミヤザワです。今回はユーザー数の多いサービス、Spotifyについて分析していこうと思います。目的としては、UX的視点も意識したデザインを作れるようになるためです。今回もいくつか分析した中で良いと思った点を少し書き出してみようと思います🚀 1.分かりやすいUI設計SpotifyのUIはシンプルで、メニューとボタンが直感的に配置されています。音楽再生、プレイリストの作成、曲の検索、アーティスト情報の閲覧など

便利すぎる！おすすめFigmaプラグイン7選！

こんにちは！大阪でUI/UXデザイナーとして働いているミヤザワです。今回は、Figmaの実務で使えるプラグインをご紹介します。便利に使用できるプラグインばかりなので、是非最後まで見てみてください〜！ 01.SkewDat SkewDatは、文字や図形を斜めにできるプラグインです。「このコピーを目立たせたい！」や「画像全体を斜めにして勢いを感じさせたい！」時などにおすすめです。 02.IconifyIconifyは、気軽にアイコンを挿入できるプラグインです。

Wiz デザイナーアウトプット会（7月3週）

弊社では毎週1回、アウトプット会を実施しています！内容は、勉強会（内部or外部）に参加したことや、いいと思った記事の共有や、本を読むでも何でも自由です。最近のロゴデザインに使われている、すごいデザインテクニックのまとめ-2023 Logo Trends Reportロゴ制作の時にかなり参考にできそう！！新規事業を考える時にやっていることアイデア探す時とかに使える方法な気がする。各ツールの文字詰めのやり方figmaの文字詰め使える。説明が苦手なデザイナーが気を

Wiz Engineer 技術共有会　7月第2週

弊社では週に一度、1時間の技術共有会を行なっています。最近のTechなニュースや気になること、仕事の役に立ちそうな情報など、ざっくばらんに共有する会です。今週はジュニア層メンバーへ「バックエンド向け」をテーマに話しました。みんなのバージョン選定のポイントパッケージや言語など開発スタート時にどうしても直面する「バージョン選定」問題があると思います。今回はメンバーから挙がった選定ポイントを紹介します！前例プロジェクトの活用：新プロジェクトを始めるとき、既存のプロジェク

Wiz デザイナーアウトプット会（7月2週）

弊社では毎週1回、アウトプット会を実施しています！内容は、勉強会（内部or外部）に参加したことや、いいと思った記事の共有や、本を読むでも何でも自由です。グリッドスタイルについて・8ptグリッドシステムでは、4ptベースラインが使用される。この基本単位は、異なる活字サイズとラインハイトの組み合わせをセットアップし始める際に、計算を簡単にし、拡張性を持たせる。・制約を適切に設定することで、レイアウト・グリッドに対してアイテムのサイズを変更することができ、固定されたカラム

Wiz デザイナーアウトプット会（7月1週）

弊社では毎週1回、アウトプット会を実施しています！内容は、勉強会（内部or外部）に参加したことや、いいと思った記事の共有や、本を読むでも何でも自由です。 figmaのアプデがいろいろあった・開発モードの実装（2023年中は無料とのこと）　→インスペクトの機能がめっちゃ詳しくなった的な感じ　→VS Code 用の拡張機能追加・バリアブルを使ってデザインテーマを作成可能【新人デザイナーあるある】　見落としがちなデザインフォントスタイルによっては、漢字・カタカナ・英語

【フロントエンド】Wiz Engineer 技術共有会　6月第4週

MSW(Mock Service Worker)でモックを作ってみたフロントエンドでAPIのモックを作成するにはいろいろな方法がありますよね。 json-server stoplight Prism agreed api route (Next.js) 上記で挙げた以外にも色々とフロントエンドでモックAPIを作成する方法があるかと思いますが、今回はMSWを使ってモックを作成してみましたのでそれについて簡単に説明します。簡単なREST API例( https:

Wiz Engineer 技術共有会　6月第2週

弊社では週に一度、1時間の技術共有会を行なっています。最近のTechなニュースや気になること、仕事の役に立ちそうな情報など、ざっくばらんに共有する会です。今週は「バックエンドエンジニア向け」をテーマに話しました。マネジメントスキル -> DDDに活かそう！社内バックエンドシステムではドメイン駆動設計(DDD)を活用した開発が行われており、それについて非常に参考になる資料があったので引用させていただきました。著書『エリック・エヴァンスのドメイン駆動設計』と『エンジ

アメリカと日本で違うピンタレストのUIを分析

ピンタレストアプリのユーザー登録画面が、アメリカと日本でかなりUIが違ったので、分析していきたいと思います。ちなみに、ピンタレストはユーザー登録画面以外は基本的にアメリカと日本でUIが同じみたいなんです…。不思議です。入力ステップの表示の仕方が違うアメリカと日本では、入力ステップの表示の仕方でいくつか違いがありました。アメリカ・ステップバーで進捗を表示・テキストで「1 of 3」と補足がある・ボタンの上に表示されている日本・点でステップを表示・一番上に表

Wiz Engineer 技術共有会　5月第4週

ページ遷移（Link、aタグ、ブラウザバックなど）するときに確認を促すカスタムフックを作った話用途はフォームの入力内容に変更があった場合にページ遷移しようとすると「まだ入力内容が保存されてません」のようなメッセージを出したいときに使う ※react-routerにはこの機能があるけどnext.jsのuserRouterにはなかったので作った imgタグの正しい指定方法ファーストビューにloading="lazy"は入れない方が良い(googleのガイドラインにも表記

Wiz Engineer 技術共有会　5月第3週

弊社では週に一度、1時間の技術共有会を行なっています。内容としては、最近のTechなニュースや、気になること、仕事の役に立ちそうな情報をざっくばらんに共有しています。 DBの種類・設計・パフォーマンスちゃんとわかりますか？？リレーショナルDBが弊社では一般的に使われているDBですが、最近では列志向型だったり、key-value型だったりDBの種類もかなり増えているので使い分けていきたいパフォーマンスチューニングに関しては特に「APIが重い！」などよく言われる話で、パーテ

Wizマガジン

記事一覧