Sketchは文字の扱いが苦手？！
最近はPhotoshopと並行してSketchでもデザインしています。Sketchは爆速でデザインできると共にコーディングも手早く行うことができるので、短納期案件にも対応することができるすげーヤツです。 Sketchのイケていないところ そんなスゲーSketchですが、デザインをしていてAdobe系アプリと比べて不便を感じるところがあります。それは文字の扱いです。 Sketchのベースラインシフトはsupとsubが基本 Sketchでベースラインシフトができないんです。厳密にはできるっちゃできるんですが、スタイルをリセットしていないsupタグとsubタグの範囲しかできません。 当サイトのロゴはベースラインシフトで文字を少し躍らせるようなあしらいにしています。もし、Sketchでこのあしらいをしようと思えば文字を分割してあげる必要があります。 リアルタイムのカーニングが苦手 段落のカーニング
2016年のWebデザインのトレンドまとめ | creive
現在のWeb制作は、フロントエンド技術やブラウザの機能が充実してきたことで、少し前までは難しかったリッチな表現が取り入れやすくなりました。 一方、高解像度モニタからスマートフォン、スマートウォッチなど、多種多様なスクリーンに合わせて表示する要素を精査し、画面を設計する必要もでてきています。 私自身は広告サイト制作よりもCGMサイト制作の比重が大きいため、基本的に地味なUIパーツやUXの設計、改善に関わる内容を中心に情報を集めています。 その中で個人的に気になった技術、海外の記事やWebデザインのショーケースサイトでよく見る傾向、最低限抑えておきたい考え方などを5つほどまとめました。 クライアントサイドでの画像加工 デザイナーが加工したデータをアップしたり、サーバーサイドで処理することなく、クライアントサイドで画像を加工する技術を目にする機会が増えてきました。実装方法としてはCSS、SVG、
自分たちを信じて「つくっては壊して」を6ヶ月くり返した。日本発のゲームアプリ「Brain Dots」世界2,000万ダウンロードの裏側と2つのプレッシャー。 | アプリマーケティング研究所
自分たちを信じて「つくっては壊して」を6ヶ月くり返した。日本発のゲームアプリ「Brain Dots」世界2,000万ダウンロードの裏側と2つのプレッシャー。 今回は、世界2,000万ダウンロードのゲームアプリ「Brain Dots」を取材しました。 ※トランスリミット株式会社 CEO 高場大樹さん （スタッフは25名［アルバイト込］で、ビジネス1名［広報・採用］、デザイナー１名、残りはエンジニア） 「Brain Dots（ブレイン ドッツ）」ができるまで。 「Brain Dots」について教えてください。 「Brain Dots」は画面に線を引いて、2つのタマをぶつけるゲームです。2015年7月にリリースして、世界で2,000万ダウンロード（iOS 40％：Android 60％くらい）されています。 特徴としては「ユーザーの95％が海外」という点です。国別でみると、韓国とアメリカが多いで
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
スライドバナー/カルーセルに必要なのは「切り替え矢印」ではなく「ラベル」
[対象: 中級] スライドバナーやローテーションバナー、カルーセルなどいくつかの呼び名がありますが、横方向にスライドして切り替えるタイプのパーツがあります。 見た目は格好いいのもののユーザーエクスペリエンスの観点から見ると決して好ましいものではありません。 「自動的に切り替わるローテーションバナーを使うべきでない」と以前にこのブログで解説しました。 しかしもっと言ってしまえば、自動切替でなく手動切替であってもスライドバナーは使うべきではないようです。 300万の訪問のうちスライドバナーをクリックしたのはわずか1%だったとの結果がある調査で出ています。 それでもスライドバナーをどうしても使いたいウェブデザイナーのために、スライドバナーのベストプラクティスをここでは紹介します。 Googleで、ウェブのパフォーマンスアップを専門にしているディベロッパー・アドボケートのIlya Grigorik
| 株式会社アジケ |
＼ 新着情報📢 「マネジメントチームの取り組み」ページを新設しました ／ アジケが蓄積してきたノウハウ、メンバーの想いを率直にお伝えします！
Beenos （ビーノス） | 創業者がUX（ユーザーエクスペリエンス）の全責任を背負うべき
創業者がUX（ユーザーエクスペリエンス）の全責任を背負うべき. By beenos Posted in - news & Specialist on 10月 2nd, 2013 山本 郁也/Fumiya Yamamoto Design Fellow 株式会社ネットプライスドットコム Beenos本部 楽天株式会社や株式会社ビジネス・アーキテクツを経て株式会社ネコメシへ合流後、並行してBeenosへ参画。 Beenos本部にて、IA/UXデザイン、ユーザビリティエンジニアリングの領域から、Webサービス開発支援を行う。人間中心設計推進機構正会員。 ヒューマンインターフェース学会正会員。UX Tokyo所属。 スタートアップ時に創業メンバーが知っておく最低限のＵＸ構築法とは？ スタートアップのチーム・サービスを今までにたくさん見てきて、デザインを構築するにあたり陥りがちな落とし穴と最低限
"分かったつもり"で設計するな！上流工程のディレクション基礎まとめ（0ディレ関西レポ） | Webディレクターズマニュアル
こんにちは。日本ディレクション協会 関西支部の出原です。 関東では既に何度も開催されている「0からのWebディレクション講座（通称0ディレ）」が、ついに関西でも開催されたので、今回は参加レポートの形を取りながら、そこで得た学びや思ったことなどをまとめてみたいと思います。 まずは資料スライド公開から これを見るだけでもほぼ内容が把握できてしまいますが、せっかくなので以下に要点と個人的な留意点をまとめておきました。 ぜひぜひお役立てください。 コンテンツインデックス 前提となる背景、目的、課題を明確に言語化 ポジションの把握とコンテンツ設計 より具体的なユーザー定義 全ての根拠となるゴールをハッキリ設定する 1.前提となる背景、目的、課題を明確に言語化 今回喋っていただいたのは、東京講演でも人気講師としておなじみの高瀬さん。 プロジェクトの裏側にどんな背景があって、どんな課題があって、それをど
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
ColorADD - Color is for ALL!
350 MILLION COLOR BLIND WORLDWIDE 1 in 12 male | 1 in 200 female [+] Color is for ALL! ColorADD is a unique, universal, inclusive and non-discriminative language that enables the color blind to identify colors, with a wide spectrum of use on companies/entities whenever color is a factor of identification, orientation or choice. ColorADD, The Color Alphabet Five graphic symbols, represent the Prima
UXデザインをアプリ制作のワイヤーフレームとプロトタイプに取り入れるケーススタディ « ブログ｜東京のアプリデザイン制作会社｜株式会社ハラハラ｜harahara Inc.
巷で良く聞かれる「UXデザインとは？」意味が広義にわたるため明快に答えることが出来る人はなかなか少ないのではないでしょうか？ただ「ハラハラという会社で提供するUXデザインとは何？」と聞かれたらこう答えると思います。 “ルック＆フィールによって発生する体験の価値をよりよくする為の作業” UXデザインを正しく運用・開発するためにはIA（情報アーキテクチャ）とそれを実行する手法（ステートメントシート、ペルソナ、カスタマーエクスペリエンスマップ、ワイヤーフレームなど）を組み合わせる必要があります。 今回はそういったツールの中で制作過程におけるレイトステージにおいて弊社で最もハードに使われる「ワイヤーフレーム」と「プロトタイプ」を組み合わせる開発方法を少しだけご紹介いたします(あくまでもアプリの操作法では無くワークフローの一部を抜粋したものになります) 基本的な流れはワイヤーフレーム→プロトタイプの
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sign Up & Log In - Moqups App
新着記事
これからのUIデザインのヒントになるDribbbleのアートワークのまとめ
新着記事
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ