GMOペパボ株式会社は、「インターネットで可能性をつなげる、ひろげる」というミッションのもと、レンタルサーバーやドメインの取得、ホームページやネットショップの作成、ハンドメイド作品の売買やオリジナルグッズを在庫を持たずに販売できるサービスなど、多様な事業を、多様なブランドで展開しています。このマルチブランド戦略は、個性的なペパボのサービスを特徴づけるだけでなく、市場を確保しつづけるリスクヘッジとしても機能する一方で、サービスを超えてデザインを展開するのが難しいという側面もありました。 そこで、ペパボでは、各サービスが個別に考えていているようなデザインの原則やガイドライン、その実装としてのカラーパレットやコンポーネントライブラリなどのアセットのうち、重複しているものをすべてのサービスで使えるように一般化した、共通基盤デザインシステムを開発することにしました。ペパボでは、この共通基盤デザインシ
本文と見出しに共通 font-familyを決める 和文だけでいくのか、欧文も混ぜるのか OSによってデフォルトで入っているフォントが違うため、和文と欧文で別フォントを指定するなら有り得る組み合わせを確認しておく必要がある Webフォントを使うのか使わないのか 和文Webフォントは2020年の今でもある程度ページスピードが遅くなってしまう 作っているプロダクトの性質や決定したテーマに合わせて選ぶ必要がある いずれにしても「ブランドが大事だから」と和文Webフォントを2種類x3ウェイト使用する……みたいなのは絶対やめた方が良い 本文 最小サイズを決める ブラウザで表示できる限界もあるため、かなり機械的に決められる 年齢層の高いユーザーも多くいるなら最小を13px デザイナーからは「最小が13pxなんてかなり大きいのでは？」と思われそうだけど、年齢が高ければ13pxでも相当小さい部類 かなり洗
タイポグラフィとしてのスタイルシート タイポグラフィでは、文字や単語は機械的な手法で生み出されます。……（サイズや位置などの）情報は他の人に渡すことができ、別の機会にまったく同じものを再現することもできます。 フレット・スメイヤーズ『カウンターパンチ※1』 タイポグラフィとは、人の手によって直接描かれるものではなく、機械的な手法によって生成されるものです。そして、その書体や文字サイズや行間といったものをデータとして定義でき、そのデータをもとにまったく同じものを再現できるものでもあります。 ここに示したのはウェブサイトやモバイルアプリケーションなどの表示スタイルを記述する言語であるCSS（カスケーディング・スタイル・シート）のコードです。これによって書体や文字サイズ、行間、そして文字サイズを基準にしたスペーシングなどが定義されます。このコードをもとにして、ウェブブラウザなどユーザーエージェン
Windows10 の標準機能のスクリーンショットが強化され「Windows」＋「G」キーで、簡単にパソコンの画面の録画と録画するこができます。また、画面をキャプチャも強化され範囲指定でスクリーンショットするこができます。 Windows11でも同じ操作方法で、画面録画を撮ることができます。 このページでは、画面録画と画面キャプチャの操作方法を紹介しています。 画面録画のやり方 Windows10／11 標準機能の画面の録画キャプチャは、主にゲームアプりを録画する仕様ですが、ブラウザなど他のアプリの画面の動画も録画することができます。 ※動画キャプチャ機能の正式名称は「ゲーム バー」です。 画面録画の操作 基本操作 ここでは、動画キャプチャの基本的な操作方法を紹介しています。 動画録画の機能や詳しい録画方法は、次項ので紹介しています。 録画の操作パネルを開く 動画キャプチャはキーボードの『
こんにちは！ SmartHRのプロダクトエンジニアのshunです。 本記事では、弊社内で実施しているアクセシビリティマスター養成講座のご紹介と、SmartHRの従業員サーベイというプロダクトで実施しているアクセシビリティ改善の取り組みについてお話しできればと思います。 SmartHRにおけるアクセシビリティの取り組み SmartHRでは、アクセシビリティの専門スキルを持つ@masuP9さんと@maverickさんを中心にアクセシビリティ改善の取り組みが行なわれています。 お二人のアクセシビリティに関する取り組みに関しては、以下の記事をご参照いただければと思います。 tech.smarthr.jp アクセシビリティマスター養成講座 2022年3月から、SmartHR社内における各プロダクトのアクセシビリティ改善の取り組みとして、アクセシビリティマスター養成講座が始まりました。 @masuP9
やる気が落ちる負のスパイラル新しい職場、新しい体制、新しいサービス。 気分をリフレッシュして新しい環境でデザイナーとして働くのはエキサイティングです。試したいアイデアもたくさんあるので、最初はやる気も高めです。しかし、戦略的に活動しないといつの間にか日々の作業に追わるだけで、周りへのインパクトも仕事のモチベーションも落ちていきます。 新しい環境で働き始めるデザイナーが陥る困難はいろいろありますが、例えば下記のようなパターンがあります。 「少しでも早く役に立たないと」と焦る気持ちが先走ってしまい、情報量と必要な知識が多過ぎて整理がつかなくなってしまう。「こうしたほうが使いやすいよ」と改善案を提案してみたものの採用されず、気づけば指示を受けて作業する人だけになってしまう。「これを機会に〇〇はじめよう、広めよう」と意気込むものの、他にやることがたくさんあるので次第にやる時間を失う。こうした状況に
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
ウェブサイト構築の際にGoogle Fontsなどのウェブフォントを使用すれば、各ユーザーの環境によらず同一のフォントを表示させることが可能です。この際に行う通信について、トラッキングを一切行わないことが明示されたウェブフォントプラットフォームが「Bunny Fonts」です。 Bunny Fonts | Explore Faster & GDPR friendly Fonts https://fonts.bunny.net/ Bunny Fontsは、プライバシーを第一に設計されたオープンソースのウェブフォントプラットフォームです。ゼロトラッキングとノーログポリシーにより、欧州連合(EU)が個人データ保護やその取扱について定めた一般データ保護規則(GDPR)に完全に準拠し、ユーザーの個人データをユーザー自身で管理できるとのこと。さらに、bunny.netのグローバルCDNにより光速のロー
Author: Mordy Oberstein Last updated: January 22, 2024
プロダクト開発部デザイナーの河村恵です。昨今、デザインシステムを用いた「UI / UXの品質担保」「トンマナの統一」「再利用性の向上による開発効率のUP」が注目されつつある中、一休.comでも本格的なデザインシステムの構築を目指し、プロジェクトが発足しました。 本記事では、プロジェクト発足から一休.comならではの課題・実際に作っているUIガイドラインについてなど赤裸々にお話ししたいと思います。 目次 １） プロジェクト発足に至る経緯 ２） プロジェクトの進め方 ３） 実際に作っているUIガイドライン ４） まとめ 1.プロジェクト発足に至る経緯 CTOからのフィードバック そもそも「デザインシステム導入しよう！」となったきっかけは、CTO（以下直也さん）から一休.com と Yahoo! トラベルの2システムを一つに統合することで実現した、Yahoo!トラベルのリニューアル（詳しくはこち
目次 はじめに 情報不安について 人の話を聞くこと 寝てから考えよう わ・ざ・と、ゆ・っ・く・り・、や・っ・て・み・よ・う ロビンソン式悩み解決法 驚き、最小の法則 むしょうに腹が立つあいつのこと あなたは、そのままでいいんです はじめからやり直したい症候群 人から信頼されるためにはどうしたらよいか トラブルがチャンス あなたはひとりではありません あなたのための聖書の言葉 ぜひ、感想をお送りください リンク集 更新履歴 はじめに 私はプログラマです。 プログラムを書いて生活の糧を得ています。 プログラマというのは精神的にも肉体的にも過酷な仕事だと思われています。 夜遅くまでディスプレイに向かい、 キーボードを叩き、ジャンクフードを食べながらバグをとる…そんな職業だと思われています。 確かにそういうところもありますが、プログラマも人間です。 不健康な生活を長いこと続けることはできません。
CSS 960 Grid System 960 Grid System を使ってみよう！ フレームワークという言葉は少し置いておいて、まずはこの 960 Grid System を使ってみましょう。まずは 960 Grid System のサイトから、ファイルをダウンロード。 960pxグリッドシステムサンプル 960 Grid System の使い方 それでは 960 Grid System を使ってみます。自分で HTML ファイルを用意したら、code フォルダ内の 960.css を外部ファイルとして読み込みます。必要なら、同じファイル内にある reset.css（リセット用）と text.css （フォントなどの指定）も一緒に読み込みます。 そしてまずはコンテナを作って、container_12 というクラスを付けておきます。 カラムを入れ子にする 各カラムは、もちろん入れ子（内
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
