金 成奎

デジタル庁・プロダクトデザイナー/UIデザイナー/ウェブデザイナー。デジタルプロダクト…

金 成奎

デジタル庁・プロダクトデザイナー/UIデザイナー/ウェブデザイナー。デジタルプロダクトのUIデザインを担当しています。デザイン・ウェブ制作・DX・新技術全般などについて有益な情報を発信中です。

マガジン

最近の記事

デザイナー1年目に知っておきたかった10のこと

絶賛筋トレ中のわたくし、YouTubeで筋トレやダイエット系の動画をよく見るのですが、その時「筋トレ1年目に知りたかった10のこと」「ダイエットを始める前に知りたかった10のこと」みたいな動画によく出会います。 (意外に動画だとロジカルなきんに君) なかなかおもしろい切り口なので、新学期の季節でもあるし、今回は自分の立場に置き換えて、「デザイナー1年目に知っておきたかった10のこと」というテーマでまとめてみました。 おじさんUIデザイナー・ウェブデザイナーが後悔と反省を交

    • 『はじめよう! 要件定義』(とそのシリーズ)を読んで、はじめよう!UIデザイン

      繰り返し読んでいるマイ・フェイバリット技術書に『はじめよう! 要件定義 ~ビギナーからベテランまで』とその姉妹本『⁠はじめよう! プロセス設計 ~要件定義のその前に』『はじめよう! システム設計 ~要件定義のその後に』の、通称「はじめよう!シリーズ3部作」があります(羽生章洋さん著)。 『はじめよう! 要件定義 ~ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラス

      • デザイナーのための『Every Layout』〜真に汎用的なレイアウト設計を目指して

        最近読んだ本の中に、『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』という一冊があります。ウェブにおける汎用性や拡張性について、私自身が日頃から考えていたことが言語化されており大変感銘を受けましたので、今回本noteでは内容を紹介がてら私なりの考察を述べてみたいと思います。 本書はウェブサイト「Every Layout」の内容を日本語版として翻訳したもので、CSSについて書かれた技術書ですが、いわゆるセレクタの書き方やコンポーネントの分類

        • デザインに活かせるフレームワーク20

          久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 (ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわ

        デザイナー1年目に知っておきたかった10のこと

        • 『はじめよう! 要件定義』(とそのシリーズ)を読んで、はじめよう!UIデザイン

        • デザイナーのための『Every Layout』〜真に汎用的なレイアウト設計を目指して

        • デザインに活かせるフレームワーク20

        マガジン

        • 1本
        • #デザイン 記事まとめ
          2本
        • ui
          0本

        記事

          株式会社ベイジに入社しました

          以下、入社の挨拶 (完全版) をこちらで社外の皆様にも公開しておきます。今後ともよろしくお願いします! --------------------- みなさま初めまして、というか入社前に色々お付き合い頂きまして若干新鮮味がないかもしれませんが (笑)、本日よりベイジに入社致しますデザイナーの金と申します。既に先輩の金さんがいらっしゃるので、私のことはデザイナーの金とか、フルネームで金 成奎 (キン セイケイ) と呼んでいただければと思います。 前職を退職する時、その旨を同僚

          株式会社ベイジに入社しました

          『UX原論 -ユーザビリティからUXへ-』まとめ

          読了後の簡単なまとめ、メモです。 - 「品質」には「設計時の品質」と「利用時の品質」がある。 - 「設計時の品質」は設計作業の結果出来上がったその製品・サービスの能力のこと。 - 「利用時の品質」は設計時の品質をユーザが利用した場合のその結果のこと。これがUXのこと。 - つまりUXは「設計」によって決定されない。UXはユーザが製品やサービスを利用する経験のことであり、利用する前に決まるということはない。だから「UXは作れる」というのは誤解。 - 一方、別の視点で考える

          『UX原論 -ユーザビリティからUXへ-』まとめ

          6つの情緒性の軸を使ってウェブデザインのトーンを決定する方法を解説します

          「言語イメージスケール」の問題点 いわゆる「トンマナ」と呼ばれる、ウェブサイトやアプリにおけるビジュアルデザインのトーン・方向性ですが、その決定方法には色々な方法があります。代表的なところでは「言語イメージスケール」の活用があげられるでしょう。 詳細な内容はこちら。 デザイナーならお世話になったことがある方も多いと思いますし、実際私も何度も活用させていただきました。このマトリックスを活用することで、イメージのすり合わせが可能になり、デザインの方向性について可視化・言語化で

          6つの情緒性の軸を使ってウェブデザインのトーンを決定する方法を解説します

          [デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる!アートディレクション15の定番パターン

          ウェブデザイナーが作った成果物に対して、満足はしていないのだけどうまく言語化できなくてどうやって指示したらいいか分からない、あるいはクライアントからのフィードバックをどう咀嚼して伝えていいか分からない、結果的にデザイナーを上手くディレクションできていない.......。そんなお悩みをもったウェブディレクターいませんか? ここでは実際のデザインを見た時に感じること・あるいはクライアントが指摘しがちなことについての「あるある」を、15の事例に集約してまとめてみました。デザイナー

          [デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる!アートディレクション15の定番パターン

          初めての書籍『ウェブデザインの思考法』が発売されました!

          この度、初めて執筆した書籍がマイナビ出版社より出版されることとなりました! コリスさんにもたっぷり紹介いただいています!ありがとうございます。 今回は、こちらに本書籍の内容と、執筆に至るまでの背景について書いてみたいと思います。 デザインにまつわるノウハウ本は多くあるが、ウェブデザインの定義について言語化したガイドブックが不在であるデザインのノウハウ集やTipsを集めた書籍はわりとあります。例えば代表的なのはこのあたり。 私も熟読しました、ありがとうございます。 た

          初めての書籍『ウェブデザインの思考法』が発売されました!

          なぜそのデザインは「分かりやすい」と思うのか?

          「分かりやすくしてほしい」。それはいついかなる時もウェブデザイナーに与えられた最上のミッションであるといえるでしょう。ごちゃごちゃしてるから「分かりやすく」「見やすく」。その「分かりやすさ」の「仕組み」って、どうなっているのか、今日は深掘りしてみたいと思います。 あるデザインを見たとき、私たちがそれを「分かりやすい」判断する理由・根拠は大きく分けて3つあると思います。 1.人間が先天的に備わってる本能・直感・習性に従っているから。 そのデザインについて、過去に使ったり学ん

          なぜそのデザインは「分かりやすい」と思うのか?

          デザイン計画書を作ろう

          デザイン計画、とは聞きなれない言葉ですが、プロジェクトにはプロジェクト計画があるように、デザインにもデザイン計画があるべきではないか、と言うお話です。 「計画」とは、辞書的には「何らかのものごとを行うために、方法や手順を考え、企てること」とあります。実際のデザインの中身、色や形をどうしてどう設計するか、の話ではなく、その品質をあげるために作業はどのような環境で行いどのような進行方法であるべきか、そういった「デザインの周辺」の決めごとをきちんと整理しておくこと、それが私の考え

          デザイン計画書を作ろう

          要素をずらして重ねるレイアウトについて

          要素をずらすレイアウトの流行最近公開された、デザイン的に秀逸なウェブサイトを見ると、矩形 (長方形) やテキストといった要素を (あえて) ずらして重ねる手法を多く見つけることができます。 具体例をあげます。 napla recruit site Abel 大阪医科大学 住信SBIネット銀行新卒採用サイト まとめると、共通してこのような表現と言えるでしょう。 - 写真の両端もしくは片方の枠を、カラム幅いっぱいに吸着して配置しない (余白を持たせる)。 - 要素同

          要素をずらして重ねるレイアウトについて