2020/7/25にtraPで実施したUIデザイン講習会の資料です

One of the key elements of Google's software engineering culture is the use of design docs for defining software designs. These are relatively informal documents that the primary author or authors of a software system or application create before they embark on the coding project. The design doc documents the high level implementation strategy and key design decisions with emphasis on the trade-of

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、Developer Contentチームの矢崎です。LINE株式会社でテクニカルライターとして働いています。今日は、私が1文を書くときに気をつけていることや手法についてお話しします。 そして、この書き出しは、6月にmochikoさんが書いた「LINEの社内には「テクニカルライティング」の専門チームがあります」という記事のオマージュになっています。mochikoさんが書いた記事ですごいpvをたたき出したそうなので、人のふんどしで相撲を取ってみようという作戦で始めてみました。 この記事ではLINE社内で私が講師を務めた「LINE社内で大評判のテクニカルライティング講座」に沿って、わかりやすい1文を書くコツを紹介していま

ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun

今回より、Webサイトの制作方法を実際の案件を通してお伝えする「Webサイトのつくりかた」シリーズをスタートします！ Webサイトは目的や狙いによって制作方法はさまざま。いざつくろうとすると... ・制作の進め方がわからない ・企画のアイデアがまとまらない ・どんなデザインが良いか判断できない ・アニメーションが考えられないなど、わからないこともたくさん出てきますよね。 このシリーズでは、そんな「実際どのように制作しているのか」という疑問を、制作を依頼される方・制作を担当される方の参考となるように、弊社の制作実績を通してお伝えしていきたいと思います。 第一回目は、魔法の世界観が魅力的なファッション・雑貨ブランド「魔法部」ブランドサイトのつくりかたをご紹介いたします。 01. 魔法部とは 魔法部 https://www.felissimo.co.jp/mahoubu/ 「魔法部」とは、通販会

インターフェースの設計をユーザー視点で構築するのは、決して難しいことではありません。 ここでご紹介するのは、私がユーザーとUIの整合性を取るために使う、最も簡単な思考法です。 良いインターフェースは会話をするあなたがこれから設計するインターフェースは、あなたの代わりにユーザーと会話をしてくれる人間のような存在です。 何かを販売・広告するウェブサイトなら、あなたの代わりに24時間営業トークを行うセールスマンのようなものであり、 また、ライフスタイルのアプリ等であればそれを隣で説明する良き友人であり、それが業務ツールであれば使い方を教えるよきメンターになります。 良いインターフェースのデザインを設計したいのであれば、このような優秀な解説者のトークシナリオ（台本）を作成するかのようにUIを設計するのが一つの解決策です。 よく設計されたインターフェースは、ユーザーの一つひとつの思考に対して、一つひ

最近のWebページやアプリに適した、ラッパーの実装テクニックを紹介します。 ラッパーとはコンテンツを読みやすい幅に包むもので、CSSでのラッパーの実装、マージンやパディングの追加、中央揃え、ラッパーのバリエーション、FlexboxやCSS Gridとの組み合わせ方など、レイアウトの実装テクニックが満載です。 Styling Layout Wrappers In CSS by Ahmad Shadeed はじめに ラッパーとは ページにラッパーが必要な理由 CSSでのラッパーの実装 ラッパーのdisplayのタイプ ラッパー間のマージンの追加 全画面セクション内のラッパー ヒーローセクションにラッパーが必要ですか？ ラッパーを中央揃えにするか、左揃えにするか ラッパーのバリエーションに対するCSS変数の使用 display: contents;を使用する 流動的な背景に固定コンテンツを配置

2020年5月末でP&Gのブランドマネージャーを退職しました。僕はこのNOTEで、P&Gで非言語的に受け継がれているマーケティングの思考法を、分かりやすい教科書のようにまとめようと思います。本気で読めば1時間かからず読めると思います。が、ちゃんと理解すれば知識レベルとしては本何冊分にもなることをお約束します。さらには、そのマーケティング思考の先に、僕がどんなマーケティングの進化を考えていて、そのために次のチャレンジとしてどんなアクションを取ろうと思っているかも最終章にまとめようと思っています。 総合商社から中途採用でP&Gのマーケティング本部に採用され、シンガポールのアジア本社への異動も伴いながら、世界最高峰のブランドマネジメントの"いろは"に触れらたことは、本当に幸運なことです。直近では、ファブリーズのブランドマネージャーとして、ブランドレコードとなる売り上げを達成することが出来たのは、

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

Miklosは、18年以上のキャリアをもつUXデザイナーのリーダーであり、プロダクトデザインのストラテジストでもあります。フルスペクトルのプロダクトデザイナーとして、ユーザーのニーズ、ビジネス目標、テクニカル面での実現可能性などを考慮しながら、ユーザーの要求を満たし、利益をもたらすプロダクトデザインを目指しています。 UXデザイナーはさまざまなシーンでその活躍が期待されています。たとえば最小限のドキュメントを用いて作業を進めるチーム、リーンスタートアップやアジャイル開発を求められる環境、外部企業とコンサルティング契約を結ぶ場合、または厳しいドキュメント要件を持つ大企業や政府機関のコンサルティング業務など、さまざまな環境が挙げられます。 関わり方や環境の性質（およびそれをすべて結び付けるもの）に関係なく、UXの専門家はデザインに関するアイデア、研究結果、プロジェクトのコンテキストを効果的にさ

2020/7/2更新：以下に本記事の続報で詳細な分析を行った記事をUPしました。是非、こちらも御覧ください。 iOS14に関するつぶやきをしておりますので是非、Twitterアカウントフォローください。 やや煽った記事になりましてすいません。 2020年6月22日(月) – 2020年6月26日(金)で実施されている 2020 Apple Worldwide Developers Conference にてiOS14の内容が公開されIDFAの取り扱いに大幅なアップデートがありました。 本記事は以下の構成です。 ・本アップデートによる各ステークホルダーへの影響範囲をサマリー ・その根拠となる文献の日本語翻訳を7記事掲載 本アップデートによる各ステークホルダーへの影響範囲 結論から申しますと、モバイルマーケティングのステークホルダー ・代理店、媒体社 ・ツール会社 ・広告主 全員に影響がありま

FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用する フォールバックと古いブラウザのサポート CSS GridまたはF

はじめに1998年、デザインの勉強を全くしたことがない私がデザイン業界に入り、はや22年が経ちました。数年間は下っ端生活をしていましたので、まさか20年経ってこの会社の社長になるとは、当時の自分が聞いたら失神するでしょうね…。 そんな私は、デザイナーとして際立ったスキルや作風もなければ、立派な賞とも縁がないごく普通のデザイナーなわけですが、22年間楽しく続けてこれたのはなぜだろうと思うと、デザインという仕事を通して成長が感じられるからなのかもしれません。 このnoteでは、デザインの技術ではなく、デザイナーとして成長を実感していくための「デザイン脳」の鍛え方について書きたいと思います。デザイナーとして成長したい！と思っている方の一助になれば幸いです。 思考の変遷を残しておくデザインの経験を積んでいくと、「前よりうまくなったな」と思うはずです。うまくなったというのは、デザインの原理原則が身に

先日ローンチされたAdobe XD Trailから、Adobe XDの使い方がよく分かるワイヤーフレーム・プロトタイプを制作するチュートリアルファイルを紹介します。 Adobe XDの基本操作をはじめ、ワイヤーフレームの作成、スタイルの適用、プロトタイプの作成、コラボレーションなど、実践的な使い方がこれでよく分かります。

無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする　＞＞ SEO Japanでもたびたび紹介しているNeilpatel.com。多数の有益な記事が記載されており、ニール・パテル氏自身の知名度も抜群です。大量のトラフィックを獲得していることは想像に難くないですが、その成功の秘訣はどこにあるのでしょうか。 今回は、氏が特に重要と考えているだろう30個のアドバイスを共有している記事を紹介します。 単にSEOの施策リストというわけではなく、ブログ運営で必要な姿勢や考え方、繰り返すべきでない失敗など、広範囲に渡り扱っています。 上記のスクリーンショットでお分かりの通り、私はSEOから私のWebサイトへ、3,000万のトラフィックを獲得している。 細かく言えば、そ

この記事はUX for the Massesからの翻訳転載です。配信元または著者の許可を得て配信しています。 Making 5-day designs sprints more user-centred もし１つだけ超常的な力が手に入るとしたらなにを選びますか？ 私なら未来を予見できる予知能力を選びます。想像してみてください。株式市場はもちろん、あらゆるギャンブルで大儲けできるだけでなく、プロダクトやアイデアが実現されるのかずっと前にわかってしまいます。たとえばFacebookやTwitterが世に出る前にそれらをつくることができます。フラットデザインが主流になるずっと前にそれをつくり出して、友達をあっと言わせることもできました。いつでもどのデザインがうまく行って、どのようなアイデアが成功するのかを知ることができるでしょう。時代遅れのデザイナーになることは決してなく、いつでもスーパーデザイ

予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。 どの要素がはみ出ているか、視覚的に分かりやすくなります。 #CSS https://t.co/7tmefEDCvx

出来の良いUXデザインとUIデザインはプロダクトを全く別の新しいレベルのものにしてくれます。しかし、コミュニケーションがうまくできていなければ、クライアントにとってもデザイナにとってもいい結果は生まれません。 UXデザインとUIデザインのプロセスがうまくいけば、ユーザにとってシンプルで明快な使いやすいプロダクトができ上がります。 DUX はエストニアに事務所を構えるKristian LemberとKevin Crepinの2人が経営しているUX/UIデザインのスタジオです。彼らは使い勝手の良いプロダクトを作るエキスパートです。DUXでの業務は、レストラン予約に 便利なアプリ や自分に合った電気会社の料金プランを検索できる サービス など多岐にわたっています。 現在もてはやされている リーンスタートアップの考え方 にあるように、大企業でさえも今はLemberたちが経営するような小規模のスタジ

シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト