TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
【翻訳】Googleのエンジニアがソフトウェア開発する時に必ず書くドキュメント「Design Docs at Google」 - BppLOG
Googleでの「Design Docs」とは 2007年の Google Developer Day Tokyo での鵜飼氏のプレゼンによると「Google で必ず書くことになっているドキュメント」であり、「プロジェクト立ち上げ時の 1～2週間をかけて書く」ものです。 今回は Google のソフトウェアエンジニアである @cramforce 氏が自身のブログで「Googleでの Design Docs」について解説している記事を公開されていたため、氏の許可を得て翻訳しています。 原文： www.industrialempathy.com 関連書籍： Googleのソフトウェアエンジニアリング ―持続可能なプログラミングを支える技術、文化、プロセス オライリージャパンAmazon 読了目安：11分 (目次) デザインドキュメント の解剖学 文脈と範囲 目標と非目標 実際のデザイン システ
いわゆる退職エントリ。興味のない人は閉じるボタンを。 11月末で日本経済新聞社を退職した。2年8ヶ月という短い期間だったが、素晴らしい経験をさせてもらった。 やっていたこと 日経に入社して、日経電子版のwebを新しくモダンなアーキテクチャで作り直すプロジェクトの立ち上げから参画した。これは現在r.nikkei.comというドメインから配信されている。 r.nikkei.com 結局退職までこのプロジェクトがメインの仕事になったわけだが、最後まで全く飽きることはなかった。技術的な面で飽きずに働けるということはエンジニアにとって簡単なようでいて難しいことで、それができたのは最初のアーキテクチャの設計が優れていたこと、特定のフレームワークやライブラリに過度にロックインさせないポリシー、新しい取り組みにどんどん挑戦していけるカルチャーや環境（これは単純に人手不足という話もあるかもしれない）があって
webデザインを考える時にカラーは切っても切りはなせません。しかし、配色は苦手だけど、まぁカラーの勉強は後でいいや…センス無いしその前にやることあるし…となんとなく後回しにされがちなんじゃないかなーと思います。基本を知っておくと、デザインに役立つのはもちろん、クライアントさんに提案出来たり、私生活や料理etc…様々な場面でとっても強い味方になってくれるます。ちょっとしたスキルアップをしたいと考えてるなら、まずは配色から初めてみるのが良いかもしれませんXD 色って？ カラーモードRGBとCMYKとは？ 色の三属性について 「色相」 「明度」 「彩度」 具体的な例と配色方法 面積比率 可読性 最後に 1.色って？ まず一口に色といっても色々(シャレじゃないですw)あるのですが大きく分けて果物や印刷物など物についてる色とテレビやパソコンのモニターなど光を放っている色の2種類があります。 物体色
本記事は、Engineering Manager Advent Calenderの１日目です。 はじめに エンジニアリングマネージャ(EM)と呼ばれる職務を設置する企業が増えてきました。 私たちの主催したイベントEOF2019でも700名近い方に参加していだき、また多くの方にご協力いただき成功裏に終わることができました。 EM Meetup/EM.FMなどのムーブメントの中心の一翼を担わせていただき、その高まりを感じる一方で不安も感じます。このエンジニアリングマネージャという職務は非常に多岐にわたるケースが存在していますし、必要だとされるスキルもまちまちです。そして、多くの場合、その企業のステージや状況ごとに求めるものは違います。また、求めていることを明文化することすらされていないケースも存在します。 このことから、エンジニアリングマネージメント自体が一時的な潮流として消費され、消えていっ
デザインシステム｜デジタル庁
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 更新情報2023年12月26日 [バージョン1.4.1]スタイルやコンポーネントの修正・更新を行いました 2023年10月18日 [バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました 2023年8月31日 [バージョン1.3.4]スタイルやコンポーネントの修正・更新を行いました 2023年7月31日 [バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました 2023年6月29日 [バージョン1.3.2]コンポーネントを追加、テンプレートやガイドラインの一部修正と更新を行いました 2023年6
個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
ディレクターがプログラマーとうまくやる方法を全部教えます : LINE Corporation ディレクターブログ
こんにちは、櫛井です。 プロジェクトマネージャーやディレクターの仕事というのは多岐に渡りますが、特にプログラマーと上手にコミュニケーションを取り一定の目的を果たすというのはわりと大変なことだったりするらしいです。私は比較的プログラマーとうまくやれているタイプのようなのであまり苦労した覚えが無いのですが、過去10数年で培ったプログラマーと上手くやる方法を紹介していきたいと思います。おまけで「プログラマーに嫌われる６つのこと」も紹介します。 ※うまくやれてるイメージ図 プログラマーと上手くやる方法をざっくり言うと 役割分担として求められていることをやる お互いのTODOを把握し区切りをつける スケジュール管理をしっかりする といったカンジです。ではそれぞれ説明していきます。 役割分担として求められていることをやる そもそもディレクターが求められる役割とはなんでしょうか。Web開発案件におけるデ
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
河合塾、駿台予備校とともに「予備校3大大手（SKY）」と呼ばれる代々木ゼミナール。 そんな代ゼミが、全国27校舎のうち7割に当たる20校舎を閉鎖し、数百名の講師の希望退職も募るというニュースが報じられた。 これを受けてソーシャルメディアでは「代ゼミヤバい」「代ゼミ死亡」などと書き立てられているが、実は代ゼミは30年前から今の少子化を見越して、粛々と業態転換を進めてきた可能性があることが分かった。 「代ゼミ死亡」って本当？ 代ゼミが全国の7割の校舎を閉鎖し、希望退職者も募るというニュース。 「代ゼミがヤバい」「代ゼミショック」「代ゼミ死亡」…こんな投稿ばかりがソーシャルメディアでは目立っていた。 ポテトクリーム@potatocream代ゼミってそんなにヤバいのか2014/08/24 13:36:49T.Mogai@mogizm代ゼミいよいよヤバいのか2014/08/24 11:13:36 し
デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ
作成：2014/02/3 更新：2014/11/01 ディレクション > 提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイトリニューアルの提案 自社分析によるサイトの問題点とその解決策 見やすさ、管理しやすさへの主な工夫 サイトレイアウト案（トップページ） フロント画面＋管理画面 イメージ 保守＋運用 セキュリティ面でのご提案 バックアップと緊急時の対応 サイトマップ案 強み、実績、事例 スケジュール サイトリニューアルの提案 企画提案書の流れをメモしておきます。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。 自社分析によるサイトの問題点とその解決策
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
NVIDIA の技術が任天堂の新ゲーム機「Nintendo Switch」に採用されました | NVIDIA
新しいゲーム機Nintendo Switchについてすぐにわかることは、遊んでいてとても楽しい、ということです。素晴らしいグラフィックス、多数のゲームタイトル、そして驚くべきパフォーマンスで、「Nintendo Switch」は、何時間プレイしても飽きることのないインタラクティブなゲーム体験を提供するでしょう。 しかし、このような楽しいゲーム機の開発には、高度なエンジニアリング技術を要しました。任天堂との共同開発において、NVIDIAは500人年もの労力を、新しいゲームプラットフォームを作りあげるために、あらゆる面に注ぎ込みました。アルゴリズム、コンピュータアーキテクチャ、システムデザイン、システムソフトウェア、API、ゲームエンジン、周辺装置といった、新しいゲーム機を創るために必要な一つ一つの要素全てを任天堂と協力して一から再考、再設計することが、任天堂からお客様に対して家でも外でも変わ
非美大卒でも1年半でNewsPicksのデザイナーになれる本16冊｜yoshikawa akane｜note
こんにちは、NewsPicksのデザイナーのよっしーです。 NewsPicks Adventカレンダー16日目を担当させていただくことになりました。とても緊張します...。 9月に入社し現在NewsPicksのアプリの機能改善やブランドの共通言語になるデザインシステム構築、広告バナーやイベント周りのデザイン、採用にも関わらせていただいています。つい一昨日にありがたいことに開発チームの新人賞をいただきました。 そんな私は2年前、デザインを全く知らない人間でした。4年間非デザイン職について、いまでは会員数300万人・有料会員数8万人のNewsPicksのプロダクトデザイナーとしてやらせていただいています。独学でwebやUIデザインを学んできた私にとって、本は師匠です。そこで今回「デザインの基礎」「美大卒アートディレクターから学ぶブランドデザインの思考」「ユーザー体験設計」の3つ分けてその一部を
Twitter で医師が拾われて Google のソフトウェアエンジニアになって 3 年半が過ぎました - nodchipの日記
はじめに 『天才』はつくれる 競技プログラミング同好会競技就活部門 Google は世界最高のプログラミングスクールである 雇用形態と働き方 ソフトウェアエンジニア (SWE) Google でのお仕事 Google の面接の内容 Google の面接の問題の種類 コーディングクイズ 知識を吐き出す系 Open-ended question システムデザイン Google の面接の評価基準と対策方法 知識 技能 マインドセット Google の面接のタブー Google の面接の心構え 面接官への話し方 話す量 エリート意識 自己愛 優秀さ、知識量に対するこだわり Google の面接のテクニック 入力条件を確認する 入力の条件を簡単にできるか交渉する テストケースを作って提示する 関連する知識を答える 正しく修正する 競技プログラミングと Google の面接 おわりに はじめに nuc
達人出版会:技術系電子出版・電子書籍
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 Pythonではじめるゲーム制作 超入門 知識ゼロからのプログラミング＆アルゴリズムと数学 廣瀬 豪 図解 深層学習 数理で理解する基本原理 小池 敦 独習 ガロア理論 新妻 弘 徹底攻略 情報セキュリティマネジメント教科書 令和6年度 瀬戸美月, 齋藤健一 エンジニアが知っておきたい思考の整理術 複雑な情報を【理解する】【伝える】テクニック 開⽶ 瑞浩 エンジニアのためのChatGPT活用入門 AIで作業負担を減らすた
「地方自治体、府省庁、民間企業が誰でも利用できる素材を配布することで、別々の機関が同じものを制作したり、検討する時間を省く」（デジタル庁）という。アイコンなどを共通化し、ユーザーが一目で理解しやすいデザインを広げることにもつなげる。今後は実際に利用する自治体や企業の声を踏まえ、順次素材数を増やす。 関連記事 デジタル庁、Web・アプリデザインの指針まとめた「デザインシステム」公開 地方自治体の活用も見込む Webサイトやアプリの開発時、一貫したデザインにできるようドキュメントやデータをまとめた「デザインシステム」をデジタル庁が公開した。「デザインシステムに関わる活動をオープンにし、デザインシステムの認知向上や改善につなげる」という。 デジタル庁のWebサイトは阿部寛HPより「やばい」と話題に 河野大臣も「読んでね」 エンジニアの知識共有サービス「Qiita」に6月11日に投稿された「デジタ
Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 - JMDC TECH BLOG
JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。 勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。 勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com エンジニアがFigmaを触れるようになることのメリット 基本知識と基本操作 実装するために使う デザインシステムについて そのほか便利な機能 さいごに エンジニアがFigmaを触れ
※2023年6月27日 「今回配布を予定しているアイコンの例」画像を差し替えました。 ライセンスの記載について追記しました。 デジタル庁では、行政手続をわかりやすくするためのイラストレーションやアイコン素材集の制作をおこなっています。 2023年の始めにプロジェクトが発足し、これまでデジタル庁の四半期報告会見資料や、重点計画資料で活用をおこなってきました。これらの素材集を、府省庁や自治体、事業者の方々など、どなたでも活用ができるように配布をはじめます。 Figma Communityで公開しているデジタル庁デザインシステムから、ウェブやアプリケーションで利用ができる素材を6月中に配布開始予定です。 専門的でわかりにくい行政手続の改善へマイナンバーに関連するデジタル手続は専門用語が多く、イラストレーションやアイコンなどを活用して、ひと目でわかりやすく伝える必要があります。しかし、これまでは政
大規模デザインシステムを作る：いかにしてアメリカ連邦政府のデザインシステムを作り上げたか - カタパルトスープレックス
原文："Building a large-scale design system: How we created a design system for the U.S. government" by Maya Benari, October 3, 2017 現在、ほぼ30,000の米国連邦政府のウェブサイトがありますが、それらウェブサイトの間に一貫性はほとんどありません。テクノロジーの分野で働く数十万人の政府機関の職員がいますが、彼らの携わるウェブサイトの構築や管理方法に共通点はありません。 その結果、政府はユーザーが十分に満足できないサービスに多くのリソースを費やしています。連邦政府のウェブサイトは行政が提供するサービスの正面玄関です。アメリカ政府と何らかの接触をはかるときユーザーが最初に出会う場所です。米連邦政府一般調達局のFederal Front Doorイニシアチブの調査からウ
livedoor ディレクター Blog
2013年12月19日 ディレクターが考える「もし○○が終わらなかったら」〜LINEディレクターブログ締めます〜 カテゴリ:ディレクション Web Director Meetupが今年も開催されます。イベント実施にともないLINE株式会社では会場提供させていただきます。 イベントについては公式サイトをご覧ください。 Web Director Meetup 公式サイト ※本イベントはボランティアによるWeb Director Meetup運営実行委員会によって運営されています。 日時や場所 【日時】 2013年12月12日（木）19:00開場 19：30開演 22：30終了予定 【場所】 LINE株式会社 オフィス内カフェスペース 〒150-8510 東京都渋谷区渋谷2-21-1 渋谷ヒカリエ 27階 Access: 東急田園都市線、東京メトロ副都心線「渋谷駅」15駅出口直結 東急東横線、J
2011年4月28日、京都市南区に「ホテル アンテルーム 京都」という、ホテルと住居が一体化した施設が誕生しました。洗練されたデザインとリーズナブルな宿泊料金、そして何より“ホテルと住居の一体化”という変わったコンセプトで、じわじわと注目を集めています。今日はそんな「アンテルーム」の“中身”に迫ります。 ■ 「ホテル アンテルーム 京都」とは ▽ HOTEL ANTEROOM KYOTO | ホテル アンテルーム 京都 「ホテル アンテルーム 京都」は、京都駅の南側、九条通と十条通の間に位置するホテルです。館内には、観光客やビジネスマンなどに向けた客室のほか、実際に“暮らす”ことができるアパートメントが併設されています。また、外部の人が入れるギャラリーやレストランもあります。 ■ 人が交わるパブリックスペース まずは、アンテルームの1階にある「パブリックスペース」を紹介します。パブリックス
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
何の話 エンジニアの勉強として始めたWebサービスの個人開発。 せっかくやるなら収益化をしようと思い、個人開発2作目にして、売上月10万円を目標にサービスをリリースしました。まだ目標の売上は達成出来てないですが、その収益化モデル、サービス内容の確定、デザイン、システムアーキテクチャ、など全てを公開しようと思い、本ブログを書きました。 私はつよつよ個人開発者ではなく、1年前に組み込みエンジニアからWeb系に飛び込んだ若輩者なので、悪しからず。 [公開したサービス] オンライン動画学習のランキングサイト | Tech Course Rank 後半で詳しく本サービスについて、説明します。 プロフィール 大学卒業後、セキュリティ製品のサポートエンジニア -> Webエンジニア -> ロボット系の組み込みエンジニア-> Web系のエンジニアという経歴です。現在30才。 得意言語は、Python。フロ
こんにちは。デザインチームの八嶋です。2021年3月22日、SMBCのホームページが大幅にリニューアルされました。このホームページリニューアルは、約5年ぶりの大幅リニューアルでページ数は約1500ページにも及ぶ大プロジェクトでした。このプロジェクトはインハウスデザイナーによるホームページのデザインディレクションとデザインチームが作ったデザインシステムによる連携で作られています。ホームページの役割からUIの設計までコアとなる部分をインハウスデザイナーが設計し、多数のパートナー様にもご協力いただき完成させています。（特にトランスコスモス様、ありがとうございます。） 今回のnoteは、ホームページリニューアルチームの一員でもある八嶋が、デザイナーの大塚とプロジェクトマネージャーの髙橋、そして、デザインシステムを担当したデザイナーの金澤にインタビューをしました！ ホームページリニューアルを通して、
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..
もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
Web Designing
Web Designing 2024年4月号 2024年2月17日発売 本誌：1,680円（税込） ／ PDF版：1,580円（税込） 【特別企画】2023年のトピックからWebクリエイティブの潮流を探る 鼎談：田渕将吾氏（S5-Style）× 木村浩康氏（Rhizomatiks）× ムラマツ ヒデキ氏（QUOITWORKS Inc.） ⚫︎Introduction 【大阪・関西万博 共創のデザインシステム】 2025年に行われる大阪・関西万博のデザインシステム。大阪・関西万博の理念やコンセプトを「デザインシステム」へ落とし込んだプロセスを、クリエイティブディレクターの引地耕太さんへのインタビューで明らかにします。 ⚫︎第1特集：【事例と解説から学ぶ デザインシステム】 「デザインシステム」という言葉が認知されはじめてから数年が経ちました。その一方で、「いったいなにを表すの？」「言葉の定義
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ | コムテブログ
デジタル庁のサイトやばすぎるwww - Qiita
日本経済新聞社を退職しました - 銀色うつ時間
絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎
エンジニアリングマネージャ/プロダクトマネージャのための知識体系と読書ガイド - Qiita
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
【驚愕】代ゼミの恐るべき先見性。予備校から不動産会社に華麗な転身か。既に実績多数。 : 大人のまとめ新聞
JavaScriptフレームワーク選定の議論 - Qiita
フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた！ - paiza times
すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
400点超の無料イラスト素材、デジ庁が配布 商用利用OK 自治体や企業のWeb・アプリ開発向け
どなたでも利用できる、イラストレーション・アイコン素材集を配布します ｜デジタル庁
ホテルと住居が一体化した「アンテルーム」に潜入――京都“先進的”カルチャーの発信地に - はてなニュース
Figma によるデザインシステム入門
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
月10万円の売上を目指して、個人開発でやったこと全てを公開 - Qiita
SMBCホームページ、デザインリニューアルの裏側。｜SMBC DESIGN
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
勉強になったFigmaのデザインシステム8選｜東 莉緒／Rio Azuma
ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える