Webデザインブックマークサイト Webデザインリンク集の.SG_BOOKMARKは、デザイン性の高い洗練されたWebサイトを集めたリンク集です。webデザインの参考に活用ください。
スマートフォン 01 スマートフォンデザインの基本1 - デザインのルール 最近のスマートフォンの普及にともない、Web制作の現場ではスマートフォンサイトの制作スキル習得が急務になってきた。本記事ではPCサイトとの違いを踏まえながらスマートフォンサイトのデザインのポイントを解説しよう。 解説/西畑一馬(株式会社まぼろし) BROWSER iOS Andoroid スマートフォンサイトのデザインを考えるうえでは、PCサイトと違う点をしっかり理解しておくことが重要だ。たとえば、スマートフォンはPCと比べて画面サイズが小さく、3G回線下では回線が細いためページの読み込みに時間がかかる。CPUも貧弱なため、JavaScriptなどの処理速度も劣ってしまう。 スマートフォンの画面サイズ スマートフォンの画面サイズで注意したいのは、PCと違い、ディスプレイの実解像度では描画されない点だ。Viewpor
サービスデザインで陥りやすい3つの落とし穴|クックパッド ※2017年6月に開催された「UX Failcon 〜先人たちの偉大な失敗と成功〜」よりレポート記事をお届けします。 271万品のレシピが投稿され、月間6000万人以上に利用されている料理レシピサービス「クックパッド」。同サービスのデザイナーとして、iOS/Androidのアプリの改善や新機能の開発を行っている倉光美和氏からは「サービスデザインでハマりやすい落とし穴」について語られた。 クックパッドにおけるサービスデザインは、“仮説を立てて、開発を実行し、ユーザー検証を行う”というサイクルで行っていく。倉光氏によれば、「仮説・実行・検証」という3つのフェーズごとに、それぞれ落とし穴が存在するという。 ※(レシピ数は2017年7月時点、利用者数は2017年3月時点の数字) 1. 理想の体験がユーザー視点でうまく定義できていない 仮説を
Webサイトをデザインする時にナビゲーションをどうするか、けっこう頭を悩ませると思います。コンテンツを見せるために、サイトの構造を伝えるために、ページを移動するために、ナビゲーションはデザインで重要なアイテムです。 最近のWebサイトで見かける新鮮なアイデアが取り入れられたナビゲーションを紹介します。デザインなどの見た目だけでなく、操作性やインタラクションも非常によくできているものばかりです。 Nick Jones デザインに黄金比を取り入れることがあると思いますが、この発想はなかった!マウスのスクロール、キーボード操作で黄金分割されたコンテンツを次々に表示します。 その仕組みは、CodePenで公開されています。 110% ナビゲーションの今までの概念がくつがえされるかもしれません。 このサイトのナビゲーションには、2つの大きな特徴があります。まず一つ目は、中央にフローティングされたパネ
2016年6月20日に博報堂DYメディアパートナーズのメディア環境研究所が発表した情報によると、スマートフォン/タブレット端末所有状況は2016年に70.7%となった模様です。2010年にはわずか9.8%だったことを考えると、急速に普及していることが窺えます。 参考: 博報堂DYメディアパートナーズ「メディア環境研究所」 Webサイト制作の際、これまではPCに特化したデザイン・構造だけを考えれば済む時代でした。 しかし、急激なスマートフォン・タブレットの普及により、現在はスマートフォンやタブレットを想定した内容が求められています。 その流れで近年注目されているのが*「UI/UX」*です。 操作性が悪いとユーザーはすぐに離脱してしまいます。 スマホやタブレットでより多くのユーザーに快適に利用していただくためにも「UI/UX」の設計は非常に重要です。 今回は、UI/UXについて基本から実践レベ
今日は、デザインの基本原則を紹介します。 ワープロやプレゼン資料を作る際にも、この4原則を意識しながら制作すると資料が見違えるように良くなりますので、デザイナー志望の人に限らず是非マスターしてください。 目次 近接の原則 整列の原則 対比の原則 反復の原則 ■近接の原則 A ~ Fは画像です(あえて内容は表示していません) そこで、左側の「タイトル1」や「タイトル2」は、A ~ Cのどの画像のタイトルか分かりますか? 画像の内容が見えれば判断できると思いますが、 これだけでは、ちょっと判断できませんよね? では、次に右側の「タイトル3」や「タイトル4」は、D ~ Fのどの画像のタイトルでしょうか? こちらは、画像の内容が分からなくても判断できるのではないでしょうか? これが良いデザインと悪いデザインの違いです。 近接の原則は、関係ある情報は近づけて配置し、関係ない情報は遠ざけて配置するとい
よりよいデザインにするために、デザイナーが頭の中で考えていることを、作例などのビジュアルとともにわかりやすく解説したデザイン書籍『なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉』が2015年7月31日に刊行されました。著者は、株式会社コンセントのアートディレクターの筒井美希。 本書は、デザインに興味があるすべての人に、楽しく読んで「なるほど!」と理解いただけることを目指し、3つの章で構成されています。 Chapter 1「編集×デザイン」では、まずはなんのためにデザインするのか、その目的を理解した上でその目的にふさわしいデザインを導き出すことの必要性を、目的別の作例を通して説き、さらに最終アウトプットとしてのデザインを考えていくまでの過程をプロセスを追って説明しています。 「デザイナーの7つ道具」と題したChapter 2では、デザインのコツや気をつけるべきポイントを、「天秤」や「
未経験からWebデザイナーに転職して、2年目に突入しました。 1年間チャレンジしてきて、数々の失敗をしましたし、注意も沢山して頂きました。まだまだ勉強が足りないなぁと思う次第です。 新人でなくなってしまうので、指摘されたこととその反省、2年目の目標を書き残しておきたいと思います。 おそらく皆様から見ると、当たり前すぎて書く程でないものも沢山あるでしょう…。 「無知の知」ということで、私も1年後には、そのような気持ちで読み返せるよう、しっかり勉強したいです。 関連記事 コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ 実務経験3年すぎた現役Webデザイナーのリアル【コーディングスキル編】 - IT系女子ログ コーディング環境 スライス スライスする前にコーディングの目安をつける デザインがズレていると感じたら必ずデザイナーに確認する スライスの名称に使用する
So you’ve always wanted to version control your design projects in a friendly manner, such as Git does with front-end. Wait no more, the Abstract is here! Check it out: https://www.goabstract.com/ Here’s a 15-minute long tutorial I made with simple Abstract workflow. You’ll find a summary of top features below. Having UI assets and style guides organized within a team has always been a challenge.
友人の広告企画制作会社で、Webサイトのコーディング指示に関する注意すべきことを話しました。
初めまして。サイバーエージェントのメディア部門でディレクションをしていますshono(@BowyerApp)です。ついこの前まではAndroidアプリのエンジニアをしていました。 先日、弊社デザイナーの井上さんにエンジニア向けのSketch勉強会を開いて頂きましたのでその内容をレポートします。 目次 背景 Sketch(スケッチ)のインターフェース説明 デザイナーはインサートを開かない Sketch(スケッチ)で実際にUIを作ってみる Sketch(スケッチ)のTips 画像の書き出し シンボルを作る シンボルのネーミングを工夫すると更に便利に マージンのシンボル化 まとめ 勉強会の資料 背景 エンジニアとの共通言語を持つことで、「最終的なプロダクトの品質を上げること」 これをきっかけに各々が自分に必要な領域へと技術の幅を広げていくこと Technical Creatorとは? ー 求めら
今更だけど「マテリアルデザイン」がスゴイ。デザイナーだけでなくノンデザイナーもその考え方を知っておく価値があると思う。 マテリアルデザインは2014年〜Googleが提唱している考え方だ。主にアプリやWebサイトに採用される。Googleのサービスにはだいたいマテリアルデザインが採用されている。はじめの一步としては「マテリアルデザイン=Googleっぽいデザイン」と考えるとイメージが湧きやすいのではないかと思う。 Google+、Google Map、Gmailなんかは典型的なマテリアルデザインと言える。 マテリアルデザインの何がスゴイのか 「マテリアルデザインとは何か」と合わせてそのスゴさについて解説していく。 1. 厳密なガイドライン よく比較される「フラットデザイン」とはここが決定的に異なる。フラットデザインは誰かが「こうやって作るもんだぞ」と提唱したわけではない。明確なガイドライン
Ben Shneiderman氏の『Designing the User Interface』とJakob Nielsen氏の『Ten Usability Heuristics』の著書に基づく、インタラクションデザインに関する10個の原則というものがあります。 この原則は、「ヒューリスティック」と呼ばれるもので、経験則による広範なルールであり、特定のユーザビリティに関するガイドラインではありません。 1.一貫性を重視する 同じことを意味する複数の名称や状態があることは、ユーザーにとって好ましくありません。ユーザーの混乱を招かないように、用語と動作を一致させるようにしましょう。相手の驚きを最小限にする「驚き最小の原則(The Principle of Least Surprise)」に留意することが大事です。 アプリ内のすべての要素に一貫性を持たせるようにしましょう。たとえば、同じスタイルの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く