スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
ベータリリース開始！BacklogのUIアップデート (2) 〜変更点とデザイナーのこだわり編〜 | Backlog ブログ
仕様や画面は現行バージョンと異なる可能性があります。 Backlogの最新版についてはこちらからご確認ください。 こんにちは。最近海外ドラマがマイブーム。Backlog Refresh UI Webデザイン担当の中川です。 先日公開したベータリリース開始！BacklogのUIアップデート (1) 決意に至る経緯 では、Backlog Refresh UI の経緯についてご説明させていただきました。 第2弾のこの記事では、BacklogのUIをアップデートさせるために、実際にどういうことをして、どう変わったのか、デザインという観点からご説明します。 今回のリニューアルのコンセプト まず、今回のリニューアルで、やること、やらないことを決めました。 やること 画面をスッキリさせる モダンなUIにする やらないこと 大規模な画面構成の変更 既存機能の削除 やらないことを決める上で大切にしたのは、な
ランディングページ8要素におけるデザイン表現セオリー（サンプル165点付）
WebデザイナーがデザインするWebページの一つに、広告を経由して1ページ内で商材の特長を説明し、お問い合わせや購入へと導く「ランディングページ」があります。 ランディングページは、ユーザの興味を惹くビジュアルの魅力（シズル感）を特に強調したり、瞬時に内容を理解させるためのメリハリのコントロール力も特に求められるため、高いクオリティでページ全体をまとめ上げるには、幅広い表現力が求められます。 私もこれまで多くのランディングページのデザインに関わってきましたが、過去を振り返ると、制作に与えられる時間はタイトな割に、ページ内に掲載するボリュームは非常に多く、またメリハリを出すために様々な表現をいくつもの箇所で検討しなければならない、というケースが多々ありました。 デザイナーにとっては、いかにして効率的に、早く、且つ高品質でランディングページをデザインするのか？が大きな課題になるわけですが、多く
こういうの欲しかった、デザイン・コーディングが捗るツールまとめ
作成：2016/09/26 Tool > 使用頻度は高くないけれど「こういうの欲しかった」と思えた、役立つWeb制作で使うツールやサービスをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 アニメーション12の基本原則デモ ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモ。イラストやキャラクターなどを動かすときにインスピレーションを得たいときに。モーション作成やアニメーションの参考にした12種パターンのgif動画を見ることができます。 [tool] THE ILLUSION OF LIFE [参考] ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation CSSで写真にフィルタ加工してコード出
Web制作会社に入社して約３ヶ月、現在の心境を語りますヽ(・∀・)ﾉ - Love＆Peace
ウェブ制作会社に採用されて早くも３ヶ月が経っておりました(^^;)月日が流れるのは早いものです!!! 実際に採用された時に書いたのがこちらの記事です。 www.love-wd-yuka.com 仕事にもだいぶ慣れてきて、ようやく落ち着いてきたところなんですが・・・！私にとっては次なる課題が待ち構えております！ それは・・・ウェブサイトのデザイン！をすることです(^^)私が目指しているウェブデザイナーにやっと一歩近づける、重要なターニングポイントなのです!!!デザインを任されたという事は、今の仕事にもだいぶ慣れてきたからなんだと思います。（と、勝手に思っていますw）でもうちの会社はやる気があれば、なんでもチャレンジさせてくれる環境なので、私にとってはとてもありがたいです！今回は二つ返事で「やってみたい！やります！」と言ってしまいましたが(^^;) 案件の内容は、とある企業のホームページなので
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
初心者がアプリのUXデザインで押さえておくべき９つの原則
Nick氏はロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルアプリをデザインする際、最も心に留めておきたいことは、ユーザーにとって便利で直感的なデザインにするということです。 デザインしたアプリがユーザーの役に立たなければ、実用価値がありませんし、誰も使ってくれません。便利なアプリだとしてもユーザーの時間と労力を必要とするものであれば、その使い方を学ぶことさえしてくれないでしょう。 良いUIデザインはこの両方のポイントをおさえています： 便利なモバイルアプリはユーザー中心である。ユーザーは差し迫った問題を解決するために、あなたのアプリをインストールします。アプリにはハッキリとした「目的」が必要です。あなたのユーザーが何を達成しようとしているのかを考え、その目的に焦点を当て、必要ないものは全て取り除きます。 UI
現役WEBデザイナー8人が教える即実践で使える素材集＆情報サイト32選
『イーデス』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や報酬の有無が影響を及ぼすことはございません。 また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。※提携機関一覧 WEBサイトを作るときに、必ず必要になるのが画像素材ですね。 WEBサイトを制作する時に大切なのは、配色のバランスはもちろんですが、素材の良さで天と地ほどWEBサイトの魅力に差がでるので、素材選びがとても重要になります。 そこで、今回現役デザイナー8人が、本気で選んだ実践で活用できる素材サイトやトレンドをキャッチするための情報サイトをご紹介しようと思います。 「ユーザーが信頼して利用でき
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
超クールなイマドキのダッシュボードのUIデザインまとめ | SHINGO IRIE
プログラマといえど、管理者が使うものといえど、美しい機能美でまとめられたダッシュボードをつくりたいものです。今回は、参考になりそうな美しいダッシュボードを集めてみました。 クールなダッシュボードデザイン集このくらいシンプルなのが好みです。 Gear Admin UI v2 Analytics系。数字の比較や計算が多いものに向いてそう。 Some Analytics 比較的オーソドックスに使えそう。最近、わりとこういうダッシュボードデザインが多いですね。 Dashboard Web App Product UI Design: Job Summary グラフの見せ方が個性的。 To-Do Dashboard サーバーのダッシュボード。 Server Dashboard カラーを統一するのも綺麗にみえます。 Dashboard Overview Screen トップメニューにすることで、画面を
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
DESIGN ARCHIVE vol.3｜迷ったときにすぐに役立つ！配色デザインアイデア|haconiwa
色の組み合わせがカンタンにできる！おすすめ配色パターン こんにちは。Keinaです。 デザインの基本といえば、配色デザイン。 学生の頃に色彩論を勉強したことがあるんですが、 色について知れば知るほど、デザインするのが楽しくなりました。 本日は、なんとなく色を選んでしまっている初心者さん、ついつい好きな色にかたよりがちの方のために、 迷ったときにすぐに役立つ！配色デザインアイデア3つをご紹介します。 01. 写真の配色から色を探してみよう 日常や旅で撮る写真には、必ずいい色が隠れていることが多いです。 撮った写真をPhotoshopで開き、ドキュメント内から好きな色を探して「スポイトツール」で直接クリックするだけで色が抽出できます。自分のパレットに思い出の色をプラスするのも楽しいものです。 春色を選びたいとき 春に咲く「花」の写真を使って色を選んでみましょう。 （ 権現堂桜堤の桜 #f0d7
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門Webメディアのリニューアルで使った手法 | THE BAKE MAGAZINE
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法 こんにちは、BAKEのデザイナー井手口です。 前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。 リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の
ボタンデザインで押さえておきたい4つのポイント【プロ直伝】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。 「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。 今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を
Webデザインの没個性化と認知容易性 | ベイジの社長ブログ
Webサイトのデザインは紙のデザインと異なり、技術的な制約が強く、特に最近は様々な環境（デバイス、ブラウザ、画面サイズ、屋内・屋外など）での閲覧に対応できることを求められます。そのため、戦略から要件、コンテンツ、機能と論理的にデザインを決めていくと、どこかで見たことあるような没個性なデザインになりやすいものです。（注：ここでいうデザインは視覚的なデザインを指します） マルチデバイス、マルチブラウザが進み、レスポンシブWebも選択肢の一つとして一般化した昨今では、Webデザインの没個性化はますます進んだ印象があります。例えば、Googleが公開しているマテリアルデザインのガイドラインを見ても、デザインのパターン化と属人性排除の思想を如実に感じることができます。また、データドリヴンなサイト改善を積極的に行っていくと、「デザインの個性」と成果に大した因果関係がないことを痛感します。 没個性なデザ
サービス作りに関わるなら追っておきたい！IT業界のトップデザイナー5人
この記事は、IT系企業に勤めている「サービス作りに関わる人」に向けて、必ず追っておくべき第一線で活躍されている日本人デザイナーをまとめたものです。 デザイナーだけでなく、全職種の方に知ってもらいたいので、デザインのイロハというよりも「ユーザー、事業やサービス、組織に対してどのようにデザインで価値を提供するのか」を常に考え、実践・発信している方々を中心にピックアップさせていただきます。 前提として、「今のデザインがどういう文脈の上にいるのか」ということについて、少し解説を挟みます。 この辺りに明るい方は読み飛ばしてください。 デザインと一口に言ってもその領域は多岐にわたっており、UIデザイン・UXデザイン・グラフィックデザイン・プロダクトデザイン・サービスデザイン・インタラクションデザインなど、IT系でよく使われるものだけでも色々なデザインが存在し、デザイナーに求められる範囲が非常に広くなっ
新しいウェブデザインの魅せ方を知ろう！参考にしたいWebサイト40個まとめ 2016年8月度
移り変わりのとても速いウェブデザインの世界では、どのようなデザインや実装テクニックが人気トレンドとなっているのか、定期的にチェックしておくことが重要です。今回は、クリエイティブなアイデアの参考にしたい最新ウェブデザインをまとめてご紹介します。 コンテンツを最大限うまく引き出し、ユーザーの印象に残るデザインを演出する最先端ウェブテクニックを体感してみましょう。各サムネイルをクリックすることで、参考ページを確認することができます。 詳細は以下から。 新しいウェブデザインの魅せ方を提案する、参考にしたいサイトまとめ Pharrell Williams ファレル・ウィリアムズの世界観を表現した公式ページ。グリッド上に並べられたサムネイルをクリックすると、豊富な情報を多彩なレイアウトでまとめています。 Heyblend 美しい配色とシンプルなレイアウト、書体の組み合わせはぜひ参考にしたいミニマルデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
有料フォントの代替になるフリーフォントも見つかる！ブックマークしておきたいフォント関連の便利なサービスのまとめ
org-rabo.com