「UI/UX」はもはやWEBデザインやアプリ開発において、無くてはならない存在となっています。実際にWEBサービスやアプリに触れて確認することも大事ですが、資料でまとめて勉強するのもありですよね! そこで今回は、日本中の「UI/UX」に関する資料を気合いで全部集めてみました!(たぶん) それでは、早速みていきましょう! UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
![日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん) | BtoBサービスキューレーション Boxil(ボクシル)まとめ!](https://cdn-ak-scissors.b.st-hatena.com/image/square/3118f3b10ceddb56a44c0ad1e7e8a29a6b9c186f/height=288;version=1;width=512/http%3A%2F%2Fboxil.jp%2Fmagazine%2Fwp-content%2Fuploads%2F2015%2F05%2F%25E3%2582%25B9%25E3%2583%25A9%25E3%2582%25A4%25E3%2583%258935.png)
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが! 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか!? 実は、このレイアウト(巨大ヒーローイメージと4つのフィーチャーボックス)が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス(GDS)」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府(gov.uk)のサイトには、「デザイン原則(Design Principles)」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
これはいいサービス!助かりますねー。 Picky-Pics(ピッキーピックス) チラシを簡単に作れてしまう 「Picky-Pics(ピッキーピックス)」はチラシや名刺をウェブ上でサクサク作れるウェブサービス。これさえあれば、Photoshopは要りません。デザインセンスも要りません。すばらしい! 使い方は簡単。作りたい資料を選択して、デザインを選びます。 すると編集画面に移動します。あとは文字や背景を加工していくだけ。 素材は5万点近く用意されているそうです。 直感的に素材を追加できます。 各素材はドラッグすると移動します。簡単! 編集画面の使い勝手もすばらしく、ピクセル数を合わせやすいガイド機能が実装されています。 フォントも豊富!これは嬉しいですねー。 出力は3パターン。ウェブページにもできるというのは嬉しいですね。 有料素材を使っている場合は、出力にあたって費用が発生します。この値段
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。+いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか?」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ(サイズ)を指します。 【第1部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
縦長のwebデザインをがむしゃらに集めています。
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい! そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5+CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方|Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル|CSSデザイン|スタイルシート(CSS)|PHP & JavaScr
こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか? 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず! そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリのUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
皆さんは、満足したバナーが作れていますか? バナーは、自社サイトへの誘導やCVにつなげるための重要な役割を果たします。 しかし、限られたサイズの中で、ターゲットに刺さるバナーをデザインするというのはなかなか難しいもの・・・。 そこで今回は、効果が高い高品質なバナーを作成するために役立つ記事やサイトをご紹介します。 Webデザイナーやディレクターには特におすすめです。 効果の出るバナーの作り方の参考になる記事 実際に効果の出ているバナーの事例を参考にすることは大いに役立ちます。 下記で紹介している記事を読みつつ、実践していけば、効果の出る高品質なバナーを作れるようになるでしょう。 100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本 LINEが今までに運用してきた広告からわかった、効果の出るバナークリエイティブを作るためのポイントを紹介している記事。 実際にたくさんのPD
みなさんこんにちは!無事大学の卒業が確定して一安心のmegです。今回は初心者向けの記事としてデザインの基本についてまとめてみました。デザインに興味はあるけれど何を勉強すればよいのか分からない方、これからデザインについて学ぼうと思っている方の参考になれば幸いです♪ 目次 デザインとは何か 「デザイン」という言葉の意味 ソール・バスとスティーブ・ジョブズの言葉 デザインの4つの基本原則を知る ‐『ノンデザイナーズ・デザインブック』より 近接 整列 反復 コントラスト まとめ – 【2014年3月9日18時27分「概念とテクニックは繋がっている」を追記しました】 1、デザインとは何か 1-1、「デザイン」という言葉の意味 皆さんは「デザイン」と聞くとどんなことをイメージしますか?オシャレなこと?洗練されていること?私たちはなんとなく見た目が美しいことや、ぱっと目を引くものなどを想像しがちですが、
プレゼン資料をキレイにわかりやすく作りたい!と思い立った人に、まずお勧めしたいのがこのサイト「伝わるデザイン|研究発表のユニバーサルデザイン」です。基本的には研究発表を行う学生さんをターゲットとしているサイトですが、ビジネスマンにも読み応えは十分。提案書・企画書のプレゼン資料作成にそのまま利用できる内容となっています。 魅力は、わかりやすいサンプルと豊富な解説。デザイン初心者にうってつけのサイトです。ページはすっきりとしていて非常に見やすく・読みやすくレイアウトされています。 サイト全体の情報量も多からず少なからず、ほどよく網羅されていて、ひととおり目を通し終わった頃には、一歩レベルアップしている自分に気づくこと間違いありません。百聞は一見に如かず。まずはご覧になってみてはいかがでしょうか?
HTML5 Conference 2013 in Gifuのデザイントラックで行なわれたセッションスライド。 アプリデザインについての講演。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く