本ライブラリは NICT のセキュリティイノベーター育成プログラム「SecHack365」にて開発を進めました。この場を借りまして、トレーナー、アシスタント及び事務局の皆様に感謝を申し上げます。 「GingaUI」は LLM を活用しウェブサイトのデザインテーマを自動で生成する機能を備えた UI コンポーネントライブラリです。React で構築されており、Next.js などのフレームワークと組み合わせて利用できます。 どんなもの？ 以下のポートフォリオサイトに PoC を実装しているので、ヘッダー右上のボタンからぜひお試しください。 一言で言うと、ウェブサイトの文章にふさわしいテーマを自動で生成する機能を備えた UI コンポーネントライブラリです。 先に書いておくと、テーマというのは配色やフォント、角丸の大きさなどのスタイル部分を指しており、レイアウトやコンポーネントの配置等の画面設計に
はじめに 一流のデザインを取り上げ、一流のデザインたらしめている要素を紹介していきます。 最低限ここはクリアしておくべきという基本的な部分から、その企業独自の発展的なデザインまで取り上げていきます。 今回紹介する要素を真似するだけで、初心者でも玄人が作ったようなデザインを作ることができるでしょう。 特に注目していただきたいのは、 想定されているユーザーとその性質 要素の配置方法 使用されているフォント 基調となっている色 です。早速見ていきましょう！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 渋谷区 最初に紹介するのは渋谷区のトップページです。 かなりシンプル、かつ見やすいページになっています。 区のWebページと
Web プラットフォームの Interoperabilityを実現する！ Open UIのあゆみとこれから 問題 Button要素ってどんな見た目？ Button要素ってこんな見た目！ I am a button who has suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper long content!!!!!!! Yey!!!! 「昔は？」 これぜーーーんぶブラウザネイティブのButton！ ref: Styling form controls | 456 Berea Street これぜーーーんぶFFのブラウザネイティブButton！ これが
みなさんこんにちは、ヒラギノフォント公式note編集部の正木です。 フォントを調べてランキングを作る企画、第二弾となります。 第一弾のYouTube編はこちらからご覧ください。 今回は、企業の統合報告書/アニュアルレポートについて調べました。 「アニュアルレポート」は年次で財務情報を投資家に伝えるための資料ですが、近年ESG（環境・社会・企業統治）情報などの非財務情報を含む企業価値情報の発信が求められており、「統合報告書」として公開されることが主流となってきているようです。なお、今回は統合報告書/アニュアルレポートを厳密に分けず取り扱いますが、ここからは「統合報告書」とまとめて記載します。 統合報告書はまさに、外部のステークホルダーに伝えたいメッセージが詰まっている資料と言えるでしょう。そのような媒体で、メッセージを載せるフォントとして何が選ばれているのか、早速見ていきましょう！ 調査方法
一言で言うなら グラフィックデザインは、一言で言うなら固定的です。 一度印刷したものは（再び印刷し直す以外に）内容を変更する方法はありません。 サイズは固定で、A1サイズのポスターはどこに持って行ってもA1のままです。 見る人が操作してA2にするとか、体格にあわせてA1.5にするとか、そういうことはできません。 初めからバリエーションを作成する計画であれば、A1のポスター・A4のチラシ・ポストカードなどを用意することはできますが、あくまでそれぞれのサイズにあわせて新規に作っているようなものです。 対してオンスクリーンデザインは流動的です。 伝わりやすい話だと、同じサイトやアプリでも、使っているデバイスや環境にあわせて見た目が変わります。 デスクトップの大きなモニターで見るときと、スマートフォンの小さな画面で見るときでは、同じコンテンツでも随分見た目が違います。 また、仮に同じデバイスであっ
ZennサイトのUIにおいて、角丸のチューニングを行い、その大きな目的としては、前回のエレベーションのチューニングと同様にユーザー体験の向上を図りました。本稿では、実施した角丸のチューニングがどのようにユーザー体験向上に貢献するかについて解説し、さらにCSS変数の調整による柔軟性にも触れます。 角丸とは 「角丸」とは、オブジェクトの角に丸みを持たせるデザイン要素です。主に矩形のオブジェクトに適用され、CSSのborder-radiusプロパティを使用して角丸の半径を指定します。 角丸が持つ意味は、オブジェクトが丸みを帯びることで、そのオブジェクトがインタラクト（クリック/タップ/ドラッグ&ドロップ/フリック/スワイプ）可能であることを示します。これは物理世界のメンタルモデルと連動し、触れやすさや触れた際の怪我のしにくさを意味します。 Zennの角丸チューニングの経緯と目的 Zennでは、以
はじめに 一流のデザインを取り上げ、一流のデザインたらしめている要素を紹介していきます。 最低限ここはクリアしておくべきという基本的な部分から、その企業独自の発展的なデザインまで取り上げていきます。 今回紹介する要素を真似するだけで、初心者でも玄人が作ったようなデザインを作ることができるでしょう。 特に注目していただきたいのは、 想定されているユーザーとその性質 要素の配置方法 使用されているフォント 基調となっている色 です。早速見ていきましょう！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 渋谷区 最初に紹介するのは渋谷区のトップページです。 かなりシンプル、かつ見やすいページになっています。 区のWebページと
最近こういう記事を見かけたので、「視認性」「ニュートラル」「デフォルト感のない」 を揃えていそうなフォントを3つ紹介する。 Murecho 僕が最近よく使うオープンソースフォント。 ニュートラルよりかはちょっとモダンめかな？M+フォントがベースになっているようで、視認性も高くデフォルト感も少なめ。 漢字はM+フォントほぼそのまま。ひらがなは所々変更がありMurechoのほうが少しポップな印象。 大きく違うのは英字、数字、記号だ。英字は全体的に横幅が狭くなっており細かい調整が入っている。数字もM+のものと比べて1まわりサイズが小さい。英字だけでも自然に見えるし日本語と一緒に使っても違和感がなく、うまく調整されたフォントだと感じる。 このフォントはアメリカ人デザイナー Neil Summerour氏によってデザインされていて、フォントの名前はがNeil氏が留学生として滞在した香川県牟礼町からつ
はじめまして！ 希望あふれる優しいデジタル社会を、未来に残したい千葉です。 「すべての経済活動を、デジタル化する。」をミッションに掲げるスタートアップ、LayerXでBrand Experience（BX）デザイナーとして働いています。 LayerXは、2023年8月1日に5周年を迎えました。と同時に、コーポレートブランドのリニューアルを行い、アップデートしたロゴとミッション副文を公開しました。 わたしはBXデザイナーとして、このプロジェクトに参画しました。正直、目が回るような日々だったのですが（笑）少し落ち着いた今、改めて振り返ってみるととても多くの学びを得られました。 これからブランドリニューアルを主導する誰か、ブランドリニューアルで実際に手を動かす誰か、結局ブランドリニューアルって何なのよ？ と思っている誰かにとって、ちいさなヒントになるといいなと思っています！ また、本noteの最
こんにちは。LayerXのデザイナー、saikoです。 Fintech事業部として、三井物産デジタル・アセットマネジメント株式会社（以下、MDM）に出向し、色々なデザインに関わるお仕事をしています。 今回は、新たに「MDMの日本語表記ロゴ」を制作することになったので、制作過程で気づいたことを共有したいと思います。 文字とフォントは奥が深いね。 制作のきっかけ少し前に、広報担当の方から 「今の英字だけのロゴは正直読めない（視認性が高くない）し、他の三井物産グループ会社との違いがぱっと見でわからない」 との意見をいただきました。 言われてみると確かに、三井物産グループ内にはMDMと似た名称の会社があったり、英字ロゴだけで見比べると違いが分かりづらかったりと、初見で「MDM」だとすぐに認知しづらい印象がありました。 左のシンボルで三井物産だとわかる方は一定いるものの、会社名は覚えづらいかも🤔今
こんにちは、グッドパッチの佐宗です。 今日はGoodpatch Design Advent Calendar 2021 5日目ということで、『デザインの価値を引き出す事業マネジメント』について書きたいと思います。フレームワークというより、実際の事業マネジメントとして、自分が統括しているStrapチームでどんな実践をしてきたか一部を書きたいと思います。 デザインの価値を引き出すとは？ 昨今、「デザイン」の解釈が広がり色んな文脈で使われすぎて様々な意見が出てきていると思います。 多義性があって何を指すものなのかよくわからない、まるでグラフィックやビジュアルそのものに価値がないかのように聞こえる、実際に手を動かさないデザイナーが増えた、などなど。 自分がこの議論に対して思うのは、デザインはものを形づくるデザインと、無形資産としてのデザインの大きく2つに分けられて、どっちを大事にした方がいいみたい
はじめに今までUXデザインを勉強して、実践して、HCD専門家の資格を取って、研修やメンバーを育成して行く中で言わなかった話をしようと思います。 デザイン＝ビジュアルデザインだと勘違いされることが多く、センスは関係ない、デザイン＝設計だ、と伝えてきました。 しかし、実はUXデザインにもセンスは必要です。そのセンスは生まれながらに持っているものではなく、育てられるものを指します。ハードルが高いと思われて、UXデザインの世界に入ってくる人が少なくなると困るから今まで言いませんでした。しかし、今度は一度研修を受けて実践すると手法が分かればできる、と思われることが多くてモヤモヤしていました。その心の内を明かそうと思います。 ※あくまで私の主観で記載していきます。 UXデザイナーとはユーザが気付いていない潜在ニーズ(インサイト)を見つけ出し、その潜在ニーズに対して理想的な素晴らしい体験を提案する人のこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
