DIST.26 「Webサービスの個性を支えるデザイン」で発表させていただきました。 https://dist.connpass.com/event/123241/ https://esa.io
![認知パターンから考えるesaらしさのデザイン / Thinking esa-like design](https://cdn-ak-scissors.b.st-hatena.com/image/square/992e2d3f26693538e9f38fe800d6ee1b0a4efec9/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Ffdd414210ee340d0904acb01e3060e24%2Fslide_0.jpg%3F12445731)
DIST.26 「Webサービスの個性を支えるデザイン」で発表させていただきました。 https://dist.connpass.com/event/123241/ https://esa.io
もくじ 【色覚シミュレーションの前に】色覚とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュレーションの前に】色覚とは 色覚シミュレーションの方法をお伝えする前に、ざっくりと「色覚」についてご説明します。色覚には「P型」「D型」「T型」「A型」「C型」の5つのタイプがあり、それぞれ以下のような特徴があります。 P型:赤い光を主に感じる錐体が無い、あるいは分光感度がずれている D型:緑の光を主に感じる錐体が無い、あるいは分光感度がずれている T型:青い光を主に感じる錐体が無いため、青色付近の識
About "Chromatic Vision Simulator - Web Edition" This software is a color vision experience tool for color normal individuals that can simulate three most common deficient types of congenital color vision, i.e. Protanopia, Deuteranopia and Tritanopia. Although this is a web-application coded with HTML5 + Javascript and is based on the "Chromatic Vision Simulator" smart-phone edition, it works with
デザインアプリ Sketch が、デザインの現場で人気となっています。公式の利用ユーザー数は発表されていませんが、多くのデザインチームがSketchを使っており、名前を聞いたことがある人も多いのではないでしょうか。 Sketch が他のデザインアプリと決定的に異なる点のひとつとして、活発に活動する開発者コミュニティと、これまでに作成された素晴らしいプラグインがあります。これらのSketchプラグインを使用すれば、豪華な3Dイラストやユニークなアニメーションなどを手軽に作成することができます。 今回は、ウェブデザイナーの制作時間を短縮できる「時短」Sketchプラグイン50個をまとめてご紹介します。カテゴリ別に分類されているので、自分にぴったりのプラグインを探してみてはいかがでしょう。 Sketchってこんなに便利!デザイナーが入れておきたい無料プラグイン12個まとめ UIデザインの作成ツー
昨日に引き続きプラグインの紹介です。今日紹介するのはコレ Stark The color-blind simulator and contrast checker for Sketch. Design with accessibility in mind. (Sketch用カラーブラインドシミュレーター&コントラストチェッカー。アクセシビリティを考慮したデザイン) まずはインストール インストールはSketchpacksやSketch Toolboxで行いましょう。Starkで検索してインストール。 カラーブラインドシミュレーター Starkには8種類のカラーブラインドシミュレーターが用意されており、様々な症状の色盲・色弱の状態をシミュレーションすることができます。 まずは試しにこんなサンプルを用意してみました。 PluginsからStarkを選択し、Show Starkしてみます。こんな
Transcript ࣄۀͷՄೳੑΛ ՄࢹԽ͢ΔͨΊͷσβΠϯ Bank, Inc Kanako Kawahara Տ ݪ߳ ಸ ࢠ @kanakt ੍࡞ձࣾ ͳͲ ϦʔυσβΠφʔ 7ਓͷࣾһͱͯ͠δϣΠϯ σβΠφʔ ΣϒΛத৺ʹडୗ੍࡞ σβΠφʔ/ࣥߦһ ۀϝϯόʔͱͯ͠δϣΠϯ 2008~ 2013~ 2017~ None None None ܦӦऀͱͲ͏ର͠ͳ͕Β ϓϩμΫτΛ͔ͨͪʹ͖͔ͯͨ͠ ܦӦऀͷϏδϣϯΛͲ͏ͬͯ ࣾϝϯόʔʹ͍͑ͯΔ͔ 1 2 BANKͰ৽نࣄۀΛͭ͘Δͱ͖ͷྲྀΕ CEOޫຊͷԾઆ σβΠφʔ͕ϞοΫ࡞ ΤϯδχΞɾPMͳͲΛՃ͑ɺ ։ൃ ੈͷதʹɺ જࡏతͳ1ʙ3ສԁͷ গֹࢿۚχʔζ͕͋ΔͷͰͳ͍͔ CEO͕͍࣋ͬͯΔԾઆ ৽ن։ൃ࣌ʹେʹ͍ͯ͠Δ͜ͱ CEOͷ಄ͷதʹ͋Δ Ծઆ Λ શྗͰݕূ ͢ΔͨΊͷϓϩμΫτ։ൃ
DroidKaigi 2018 での発表資料です。 https://droidkaigi.jp/2018/ Room 3 - 2018/02/09 16:50-17:20 【参考資料 / リンク】 << 前半 : ウィンドウサイズの変更に強いレイアウトの構築 >> ・android:fitsSystemWindows - View | Android Developers https://developer.android.com/reference/android/view/View.html#attr_android:fitsSystemWindows ・OnApplyWindowInsetsListener (v4 compat library) | Android Developers https://developer.android.com/reference/android/
DroidKaigi 2019 での発表資料です。 https://droidkaigi.jp/2019/ Room 2 - 2019/02/08 11:20-11:50 【参考資料 / リンク】 ・Guide to app architecture | Android Developers https://developer.android.com/jetpack/docs/guide ・ウィンドウサイズの変更に強い堅牢な画面の構築 | Speaker Deck https://speakerdeck.com/nakamuuu/droidkaigi-2018 ・DroidKaigi/conference-app-2018 | GitHub https://github.com/DroidKaigi/conference-app-2018 ・StateAwareViewModel - na
スマートフォンが世に出て以来、アプリを制作するためにデジタルツールを使うデザイナーが急増し、それに合わせて従来のツールが進化を遂げたり、時代に合った新しいツールが登場したりしています。 中でもBohemian Codingが開発・販売しているSketchは一定の人気と地位を獲得しており、今やUIデザインツールの代名詞となっています。 このLessonでは、Sketchについてまだご存知でない方やこれから使おうと考えている方を対象に、Sketchの概要と基本的な使い方、架空のアプリ画面を例にしたUIデザインの制作方法、エンジニアとのやりとりなどについて解説します。 Sketchとは何か? はじめに、そもそもSketchとは何なのか、改めておさらいをしておきましょう。 Sketchを開発・販売しているのはオランダのBohemian Coding。しばらくアムステルダムを拠点にしていましたが、現
12/1、2の二日間、日比谷ミッドタウンで開催されたデザインカンファレンス「Designship」に登壇しました。当日のスライドとスクリプトを、事後になりますが公開します。いろんなデザイナーの方に役立てれば幸いです。 こんばんは、佐々木です。 自分はPARKという会社で代表/アートディレクターをしています。 今日はデザイナーのキャリアについて話します。 今日持ち帰ってほしいこと。 今日は、天才デザイナーの方にはつまらない話かもしれません。 まずはじめに、なぜオールラウンドか???私自身の体験を交えながらお話しします。 意外と歳いってます。若作りのために金髪にしています。いわばビジネス金髪です。広告に始まり計4社渡り歩きました。今はパークという会社立ち上げ、主にベンチャー・スタートアップのブランディングをしています。 マス広告のクリエイティブからキャリアを始め、今はざっとこんな感じです。幸運
今回は見出し(h1〜h6タグ)のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
[fancy_box]海外デザインブログDesignModoで公開された「Lessons Learned From Analyzing Material Design Components」の著者 Paula Borowskaより許可をもらい日本語抄訳しています。Thank you so much as always![/fancy_box] Googleのデザインガイドライン「マテリアル・デザイン(英:Material Design)」に目を通したひとは、どれだけ広範囲にわたって細部まで気を配って作成されているのか気付いたのではないでしょうか。 ガイドラインに目を通してみることで、たくさんのことを学ぶことができます。その中でも、複雑なビジュアル・スタイルガイドの作成が可能だということは大きい収穫でしょう。「簡単に」という意味ではありませんが、Googleのように複雑にサービスが入り組んで
個人や商用で無料利用できる、日本語のフリーフォント260種類を紹介します(公開時より、2つ追加)。 ビジネスからプライベートまで、幅広く利用できるフォントが満載です! 毎年まとめていますが、去年は219種類だったので、大幅に増えています。無料でなくなったフォントや配布終了になったフォントもいくつかありました。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています(※情報はこの記事の執筆時のもの)。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開!フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 まずは個人的に、今年一年かなり使用したフォントからご紹介。 3種類
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。 これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。 マウスアウト時の挙動 とりあえず、それぞれのマウスアウト時の挙動を確認します。
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く