"Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様こんにちは、シリコンバレーでUXデザイナーをしているライターのYUKIです。今回はあるひとつのサイトについてUXデザイナーとしての立場からレビューをしてみようと思います。 はじめに 私は友人らと作っていたスタートアップ会社を軌道に乗せるために数年前シリコンバレーにやって来て、現在は某米国の大企業でデザイナーとして働いています。公式な肩書きはヴィジュアル・デザイナーなのですが、実質的にはインタアクションやヴィジュアル両方に携わるユーザー・エクスペリエンス・デザイナーというところです。 LIGでは、かなり個人的な見解で、ユーザビリティに優れていると思ったサイトを説明もふまえながらレビューしたいと思います。 ただ、私が現在持っている知識は本格的にユーザビリティやデザインを学校で学んで得たものではなく、あくまでも実際の現場で働いて得たものばかりなので、「これが絶対に正しい」と思うのではなく、「
Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
How to Create a Perfect Color Scheme [Infographic] - Designmodo
How to Create a Perfect Color Scheme [Infographic] DesignDiana Valeanu • March 02, 2017 • 2 minutes READ Nothing can make a project stand out or identify your brand or business like color. Just think: What would the “Golden Arches” of McDonald’s be without the signature red and gold? When it comes to creating the perfect color scheme, there are plenty of things to consider. Established branding is
![How to Create a Perfect Color Scheme [Infographic] - Designmodo](https://cdn-ak-scissors.b.st-hatena.com/image/square/f552d7486acf21504c3b7bee6e5bda36ccfbb43b/height=288;version=1;width=512/https%3A%2F%2Fdesignmodo.com%2Fwp-content%2Fuploads%2F2017%2F03%2FHow-to-Create-a-Perfect-Color-Scheme-Cover-294475-preview.jpg)
30 Websites Featuring a Horizontal Stripe Layout
One layout trend I’m sure we’ve all noticed recently is the use of full screen horizontal stripes. These horizontal sections are often identified with differing background colours or photos and span the whole screen to create a striping effect as the user scrolls down the page. This post showcases 30 great examples of websites utilizing these horizontal stripes and shows how this layout helps spli
大規模サイトの制作過程をリアルタイムで公開しているブログの紹介 | パシのSEOブログ
知っている方も多いと思いますが、解体工事のマッチングサービスを行なっているクラッソーネさんが、解体工事業者のポータルサイトの制作経過をリアルタイムSEO日誌で公開しています。完全ホワイトハットSEOでアクセスを集める方法を実践する形です。 私が面白いと感じたのが、ブログでサイト制作やSEOの取り組みをリアルタイムで公開していることです。ブログを見ればわかりますが、1週間毎に記事が更新されており、何をどのように進めて、今後どうして行くのかという事が超細かく解説されています。 しかも完成前にドメインを公開するというのが、まず見ないやり方です。SEOブログでは、1次情報が公開されること自体が珍しいですが、ここまでさらけ出すのはかなり稀なので興味をそそられます。 ちなみに、私は今回取り上げるサイトや企業と一切関わっておりませんので、純粋な紹介＋感想という事になります。いつもどおり好き勝手書かせて頂
語るべきこと、問うべきことを放棄してはならない
悲しい。おばちゃんはとても悲しい。 主に私の遅筆ぶりが、そして「マネーは大事なんですけどマネーがすべてじゃないんですよ」と80年代ポップスのようなことを言いそうになる自分が、である。 フォントデザイナーの大曲都市氏がGUの新ロゴについてブログを書かれていたが、これがたいへんな良記事で、私の観測範囲ではまだ誰も指摘していないことを言いたい、とても言いたいので、乗らなくちゃこのビッグウェーブに！！ 佐藤可士和氏のGU新ロゴ http://tosche.net/2013/03/kashiwa_gu_logo_j.html 私がこれを読んで素晴らしいと思ったのは、大曲氏の分析と批判内容ももちろんそうなのだが、何より下記のコメントである。 ブランドというのは長期的に育てていくのであって、デタラメに舵を切っていいものではありません。それを支えるビジュアルアイデンティティは何度見ても飽きないものでないと
デザイナーなら読んでおきたい！デザインに関する6つのスライド・企画書
色彩センスのいらない配色講座 「色の比率」や「色相の距離」、「トーン」などを意識してデザインを見てみると、いろんなが配色方法が発見できるかもしれません。
【介護サイト比較】挿絵イラストの効果的な使い方 | マミオン有限会社-パソコン・数学研修、法人研修
前回もお伝えしたように、介護情報サイトを利用する多くの方は、予備知識がほとんどない状態でサイトに訪れます。 そのため、ユーザーは最初に様々な「説明ページ」を読むことになるのですが、当然、文章だらけのページでは内容の多くを読み飛ばされてしまいます。特に視力が落ちていたり、ディスプレイ上の文字を読むのに慣れていないシニア層にとっては、その傾向が高まります。 こうした際の一つの対応方法としては、写真やイラストなどの画像を掲載するという手段があります。 今回は、介護サイト内で見つけたその効果的な使い方があったので紹介したいと思います。 会話形式で注目度アップみんなの介護（Link） 『みんなの介護』のあるページでは、長いテキストでの説明の合間に、上のような会話形式のイラストが挿入されています。テキストの部分を飛ばし飛ばしで読んでいるユーザーでも、ここまで来ると自然と目を止め、その会話の内容を読んで
[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての
![[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/9068d7a52b34c4de9a5be296ee0a927a28903d59/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fdesign-rounded-corner-13-150x150.png)
脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
ディレクターは「ズケズケ言い過ぎ」くらいでちょうどいい（ワークショップレポート）
こんにちは。最近読者さんが増えて来てるような気がして気分が浮ついているナカムラです。 先日またしてもワークショップの講師役として登壇させていただく機会がありましたので、今回はその内容をふりかえりつつ、表題にあるようなお話をお届けしたいと思います。 まずワークショップについて 2013年2月16日（土）、講師やWebデザイン関連書籍の著者としても有名な千貫りこさんの呼びかけのもと、ちょっとクローズドなワークショップが最近何かと話題な「コワーキングスペース茅場町 Co-Edo（コエド）」で開催されました。タイトルはずばり「中村健太のディレクション講座」ｗｗ ストレートすぎるタイトルまんまですが、僕が講師役として登壇し「ディレクションに置いて遠慮はむしろプロジェクト成功の妨げになるよー」みたいな事をお話させていただきました。 本来求められるのは”タブーなき意見” クライアント側の担当にしても、自
画面越しに美しさが伝わる、美術館サイト23選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 美術館が好きなので、ウェブでよく情報収集をしています。 「美」を扱うのだから、さぞやウェブサイトも美しかろう……と思いきや、展示の素晴らしさに比べてデザインがイマイチで、勿体なく思うことがとても多いです。 そこで、こんなデザインならもっと見たくなる！ と思うサイトを集めてみました。 日本・東京 Bunkamura https://www.bunkamura.co.jp/ ブリヂストン美術館（※現在はアーティゾン美術館に改称） https://www.artizon.museum/ サントリー美術館 https://www.suntory.co.jp/sma/ 東京富士美術館 https://www.fujibi.or.jp/ 東京オペラシティアートギャラリー https://www.operacity.jp/ag/ NTTインターコミュニケーション・
発注者から安く見られている作業十選
オンリーワンの価値基準を貫くWP-D読者の皆様、おはざます。 今日もはてぶで跳ねないYellowです。 チョコレートの数やFacebookでの「友達」の数に投稿した記事の「いいね！」数、twitterのフォロワー数など、何かにつけて数字でその価値が表されてしまっているようにみえるもの。 あなたの価値を人に決められていませんか？ あなたはあなたらしくていいはず！ と言われ続けてうんざりしている皆様へ、つまり「人のいうことには惑わされるなってこと」です。 石橋は叩いて渡ったほうがいいですよ♪ 発注者からこの作業は安く思われている。おまいら気をつけろー！ 制作会社はただいま4月公開へ向けた年度末納品案件が佳境です。 佳境でありつつも仕様変更や追加はつきもの。その際に感じるのは「この作業はけっこう大変なのに、軽く考えられているなー」ということ。 これまでもいろいろな案件において、発注主とのギャップ
40+ Food and Restaurant Websites That Will Wake Your Appetite - Blog of Francesco Mugnai
Burger King Giraffe Yogoberry Dilly Deli Poutine La Banquise Ci & Di Hello Sour Sally! Restaurante Couve e Flor Jean-Georges Restaurants Restaurant Hotel zum Schwanen Tapas en Estado Puro Flor do Maracuja Strada Daguia Tortas Finas Zizzi Ristorante Olive Bar & Kitchen Culinaria Brooklyn Fare Mellow Mushroom Poogan’s Porch Restaurant Piz’za-za Baked NYC Mango Tree Pizza do kr
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
これなら分かる！WEB制作を無料で「学べる」サイトまとめ
作成：2013/02/4 更新：2014/11/01 Web制作 > 基本的なところを簡単に、楽しく覚えたい 自分でサービス作ったり、会社や違う職種でも 色々と「基本」はおさえておきたい 今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．HTML5 ２．CSS ３．レスポンシブ ４．配色 ５．視線誘導 / 心理学 ６．インターフェース / ユーザビリティ ７．SEO ８．ディレクション ９．アクセス解析 １０．WEBマーケティング １１．コピーライティング １２．ソーシャル １．HTML5 HTML5って何？ HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog Canvasについて知っておく
デザインの参考にしたい！404エラーページ（not found）33選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
404（Not Found）と表示されるエラーページってあまり見ないですよね。 404ページとは、サーバに接続できたものの、要求に該当するページ情報がサーバが見つけられなかった場合に表示されるエラーページです。 エラーなので普段目にすることは無いのですが、ふとしたタイミングで見た時にカッコ良くデザインされた404ページだと、「ここまでこだわるのか！！」と、サイトの好感度が上がります。 そんな小技の効いた404ページをピックアップしてみました。 404ページデザイン 33選 1. BLIZZARD ENTERTAINMENT https://us.blizzard.com/en-us/error.html 2. Henrik Hedegaard https://henrikhedegaard.com/404/404.html 3. DIL BERT https://www.dilbert.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
フラットUI
新着記事
