デザインデータとコードを一体のものとして捉える - Qiita
発表の際に使ったスライドと台本をそのまま記事にしています。 そのため、表現が口語的な部分もありますがご了承ください。 できるだけ、Web でもネイティブアプリでもクロスプラットフォームでも共通する話にしようと思っていましたが、筆者の知識が Web に偏っているので内容も Web 寄りです。 自己紹介と導入 みなさんこんにちは。 株式会社エイチームのグループ会社である、Qiita株式会社でデザイナーをしている、綿貫佳祐といいます。 プロダクト開発部というデザイナーとエンジニア混合の部署で部長をしています。 こういった出自もあり、製品開発においていかにデザインとエンジニアリングを上手く紐づけるか？について今日はお話します。 「デザインデータが完成したけど、いざ実装しようと思ったらとても大変な内容だった」 「ビジュアル上のこだわりが、実装者にどうしても上手く伝わらない」 こんな悩みを持っている人
12 年続くサービスにダークテーマ UI を導入した - Qiita
この記事の概要 2023 年 9 月 8 日に、Qiita ではダークテーマ UI の提供を開始しました。 Qiita が生まれたのは 2011 年 9 月 16 日で、およそ 12 年の月日を経てダークテーマへ対応しました。 これだけの期間続いているサービスにダークテーマを適用した事例は日本でも少ないと思うので、実施したことを記事にしてみました。 なお、Qiita 特有のコードの話は少なめに、多くの場所で役立ちそうな内容に絞っています。 対象読者 UI デザイナー / フロントエンドエンジニア 現在運用中のサービスにダークテーマを適用したいと考えている人 ダークテーマ単体の作り方は分かるけど、既存の UI に上手く追加する方法が分からない人 実施したこと デザイントークンの更新 モックアップにトークンを適用 ベータ版としての提供 正式版としての提供 デザイントークンの更新 まずはデザイン
svg のリファクタリングの流れ - Qiita
この記事の概要 ある日、こんなアイコンを作っていました。 svg で書き出しをしたら次のようなコードになりました。 <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0L0 1C2.99988 2 7 5 9.00003 7C11 5 15 2 18 1L17 0C12.9999 1.00006 9 4 9 4C9 4 4.99988 1.00005 1 0ZM1 7.00006L0 8.00006C2.99988 9.00006 7 12.0001 9.00003 14.0001C11 12.0001 15 9.00006 18 8.00006L
「このUIの実装、ライブラリを使わないとなあ」ってときに見る記事（見せる記事） - Qiita
この記事の概要 デザインデータの中には大抵「自前で実装するのは大変だから、既存のUIライブラリを使おう」と思うパーツがありますよね。 カルーセル・カレンダー・グラフなどなど……。 そういったシーンで考えておいた方が良いことを記事にしました。 対象読者 ライブラリが必要そうなUIの提案をするデザイナー 上記UIの実装を担当するエンジニア あなたが2のエンジニアに該当する場合、あなた自身が読む記事というよりは、1のデザイナーにこの記事を共有すると役立つ気がします。 そういう意味でタイトルには見せる記事とも記載しています。 筆者はデザイナーなのですが、そのせいで却ってデザイナーに厳しくなり過ぎている可能性もあります。 あくまで「筆者がデザインを作って実装者に渡した際上手くいった経験」を抽出していることを理解してもらえると幸いです。 やった方が良いこと どうしてもこだわりたい場所と、そうでも無い箇
自然に見える画像の枠線を求めて - Qiita
この記事の概要 サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。 そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。 そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。 完成物＆通常のborderとの比較 全体像はこちらです。 差がわかりやすそうな部分をクローズアップしました。 左の画像の草、真ん中の画像の右端にあるペンケース（？）、右の画像の机や天井など「borderの方が明るい箇所」が悪目立ちしているというか、ノイズに見えて気になります。 修正版がこちらです。 左の画像の空や右の画像の窓など、白く飛んでいる場所にだけborderが見え、それ以外の箇所は元の画像を活かしています。 CodePenはこちら。 仕組み <div class="adjusted-border"> <!
デザインの役割や価値（社内研修資料） - Qiita
この記事の概要 昨年、デザインに関する社内研修を実施し、その内容をQiitaでも共有してみたところ多くの反響をいただきました。 最近内容をアップデートして研修を実施する機会があったので、こちらも投稿してみます。 具体的な制作テクニックよりは抽象的な考え方がメインですが、デザイナーと一緒に働いている方や、デザインにも興味がある方のお役に立てるのではないか、と思っています。 自己紹介 私はQiitaでデザイナーをしている綿貫佳祐といいます。 2017年に新卒でエイチームに入社して、今年で6年目です。 普段の業務では、企画を考えたりUIを作ったりコードを書いたり。 割と幅広めにデザインに携わっています。 普段の業務以外だと、会社としての発信のデザイン監修する機会が多いです。 例えば、ロゴとかコーポレートカラーのような、会社として大事なグラフィック要素1。 これらが広報物内でどう使われているかのチ
残して良かったドキュメント、いまいちだったドキュメント - Qiita
この記事の概要 エンジニア的な文化・行動として「ドキュメントを残そう」をよく聞きますよね。 私の在籍するQiita株式会社では、社内の情報共有もかなり強く意識しています。 普段からドキュメントを残している中で、どんなものが効果的だったかを記事にしてみました。 なお、ここでいうドキュメントとはコード内のコメントやREADMEではなく社内Wikiのようなものを指しています。 定期的に人に説明する内容 入社時にやること 今導入している技術やサービスのまとめ 制度上のフローやガイドラインなど 新しく入社した人に説明する内容や、チーム間で異動があったら共有すべき内容などのイメージ。 自分は「この内容、何度か人に説明してるなあ」と気付いたらドキュメント化するよう心がけています。 また、これらがしっかり残っていると、次の「新しく何かを始める際の記録」が取りやすくなります。 新しく何かを始める際の記録 技
エンジニア向け デザイン基礎（社内勉強会の資料） - Qiita
これは何 私が所属している株式会社エイチームでは社内勉強会を自由に開ける制度があります。 エンジニア向けにデザインの基礎をレクチャーする会を開いたのですがせっかくだったらオープンにしようと思い、投稿しました。 今回の勉強会では「Webサービスを作る」レベルまでは踏み込めませんでしたが、ちょっとしたUIを作る際の手助けにはなれる気がしています。 なお、勉強会用に書いた原稿なので書き言葉としてあまり適切でない箇所もあります。 ご了承ください。 また、この研修の次の年に行った研修も記事として投稿しています。 設計の話 はじめに：デザイン業務の内訳とよくある誤解 デザイン業務の内訳 まず最初に設計の考え方をレクチャーするのですが、その前に1つ。 普段デザイナーが行っている業務について簡単に説明します。 後の方で話す内容と繋がってくるので、ちょっと本筋から外れますが聞いてください。 話を分かりやすく
えっ、著作権の帰属を表すHTMLタグがあるんですか？ - Qiita
smallタグ smallタグです。 かつては文字を小さく表示するために使われるタグでしたが、今ではセマンティックな役割が与えられています。 そのうちの1つが著作権の帰属を表すです。 なんでこの記事を書いたのか smallの役割って意外と知られていない気がする 最近レビューで連続でこの話をした という2つの理由から記事を書きました。 内容の補足 コピーライト表記ってありますよね？ © 2019-2021 Example Corporation All rights reserved. みたいなやつです。 色々なサイトのマークアップを見学していてspanタグで実装されていることが多いことに気がつきました。 しかしHTML Living Standardのsmallタグの章を見てみると Small print typically features disclaimers, caveats, l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
