2013年、チェックしておきたいUIデザインをdribbbleから紹介します。 高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。 2013年のデザインを振り返りつつ、来年はまたどんな素敵なデザインが生まれるのか楽しみですね。
こんにちは。デザイナーの白浜です。 人が見て美しいとデザインとされる黄金比や白銀比。なんとなく知っているものの、作り方や使い方がよくわからないという人もいますよね。 今回は黄金比や白銀比の考え方についてわかりやすく解説するとともに、Webデザインのレイアウトや画像制作に黄金比や白銀比を取り入れる方法・お役立ちツールをご紹介します。 良かったら参考にしてみてください。 (編集部注:2013年12月16日に公開された記事を再編集したものです。) 黄金比・白銀比って? 黄金比・白銀比は、古くからある人が見て美しいと言われる調和的な比率のこと。デザインに黄金比や白銀比を使用することで、言葉で言い表せない芸術的な美しさを加えることができます。 まずは黄金比・白銀比がどういうものなのか、基本の考え方についてみていきましょう。 黄金比の比率と作り方 コトバンクによると、黄金比(Golden ratio)
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ
HTML5 Conference 2013 in Gifuのデザイントラックで行なわれたセッションスライド。 アプリデザインについての講演。Read less
とりあえずのってみよう、このビックウェーブに 少し時間が出来たので、毒舌帳から分離して膨らましてみる くそ長文、くそ乱文、くそ構成なのはご容赦ください 物語の流れ ■私って古参アピール 本筋とは全く関係の無い話、「ニコニコ動画はいつもこう」に対する前置き ↓ ■デザインについてプロは言う iPhoneのデザインの変遷と比較しつつ、デザインの難しさを偉そうに書く ↓ ■ニコニコ動画はいつもこう ・・・ニコニコ運営って・・・ほんと馬鹿、と言いたいだけの話 ↓ ■ニコニコのデザインはどうしてダメなのか ニコニコ動画を例に挙げて、魚拓をとりつつ 何が変わったのか、何がいけてないのか、何がいけてないのかをまとめる お話の本筋 ↓ ■ニコニコを裏で動かしていることに自覚がない人達 エセ古参をでぃすりつつ、Zeroは裏でエセ古参たちが暗躍していた話 ↓ ■おわり 結局、ここであーだこーだ言っても何も変わ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> ますます高度化、専門家する検索マーケティング、SEO Japanもついついマニアックな記事が多目になってしまいますが、意外と変わりそうで変わらないのが検索エンジンの基本的構造。今回はそんな検索エンジンの基本を改めて整理した記事をサーチエンジンランドから紹介します。基本というには、若干高度な内容も含まれており、SEO担当者向けの基本といった感じではありますが、いわゆる「初心者向け」記事とは一線を画す納得の内容。混沌のSEOの時代、基本を再度理解した上で、来年のあるべきSEOを考えてみてはいかがでしょう? — SEO Japan SEO業界の関係者(または参入を望む人達)は、様々な細かい仕事に追われ
「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー(便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ)によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか? まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか? 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した1つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無
2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです! ↑私が10年以上利用している会計ソフト! 2016年3月16日 追記:Adobeがリリースしたプロトタイピングツールも試してみました!→ Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
Webサイトを分解して、Webサイトの設計意図を考えたことはありますか? 競合サイトの調査や現状サイトの分析をするときには、必ずといっていいほど使っているWebサイトを分解する方法を紹介します。 Webサイトを分解する 「Webサイトの分解Webサイトを分解して、Webサイトの設計意図を考えたことはありますか? 競合サイトの調査や現状サイトの分析をするときには、必ずといっていいほど使っているWebサイトを分解する方法を紹介します。 Webサイトを分解する 「Webサイトの分解」は、4つの内容で構成されています。 全体の調査であれば4つ全て実施しますが、UIの調査だければUIパーツの部分だけ使うときもあります。 ページ/Webサイトを分解する UIパーツ/ページを分解する 整理・分類された情報/UIパーツを分解する 素材/情報の集合体を分解する ページ/Webサイトを分解する Webサイト
みなさま、はじめまして。 UXチームのSatoruです。 僕は、インフォメーションアーキテクト(以下、IA)として、「情報アーキテクチャ」という切り口からUXデザインプロジェクトに関わっています。 「情報アーキテクチャ」というと、「サイトストラクチャを作る」とか「ワイヤーフレームを作る」、「情報設計」など、ビジュアルデザインやUIデザインに関わる一連の設計タスクのイメージを持たれがちですが、それ以外にいろいろな部分で実践、活用が可能なスキルセットです。 今回は、UXデザインプロセスにおける情報アーキテクチャについてご紹介します。 情報アーキテクチャとは、「『情報をわかりやすく伝え』、『受け手が情報を探しやすくする』」ための表現技術で、「複雑なものを明解にする」ということに関わる一連のスキルセットです。 そのスキルセットを使いながら、「データの持っているパターンを整理し、複雑なものを明快にす
2013-11-07 UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 今回はUI/UXデザインについて触れてある記事やスライドで自分が実際に読んで参考になったと思ったものを備忘録としてまとめました。実際にUI/UXデザイナーの人や、僕と同じくUI/UXデザイナーを目指している人、また実際に興味がある人のお役に立てたら幸いです。 記事1 UI/UXの違いについて 5分でわかるUIとUXの違い : Excite Designer's Blog そもそもUIとUXは何が違うのかという事を知らない人もいると思います。 まずはUIとUXの違いについてはっきり知らなければなりません。 記事2 なぜUIとUXがよく混同されてしまうようになったのか UXとUIが混同されるワケ : could UIとUXが混同されてしまう理由について触れてある記事です。 僕も最初はUIとUXを混同
Tweetカナダにあるデジタルマーケティングのエージェンシー、tent socialのブログで役に立ちそうなインフォグラフィックスを見つけました。 FacebookやTwitter、Google+などメジャーなSNSのレイアウトデザインをわかりやすくまとめてくれています。 このインフォグラフィックスを見れば使用されている画像サイズ、テキストの分量が一目瞭然です。サイトやアプリのUIを考える際にも参考になりそうです。 元ネタは以下の記事より。 The Ridiculously Exhaustive Social Media Dimensions Blueprint [INFOGRAPHIC] サイトに貼り付けてもいいよーというコードがあったので、まるっとインフォグラフィックスを見れるようにしました。ご参考ください。 Please include attribution to jeffbere
インバウンドマーケティングは、新マーケティング時代のビジネスソリューションです。 理由のひとつは、低コストでビジネスのプロモーションやマーケティングに大きな効果があることです。これはアウトバンドマーケティングと比較されることがよくあります。 例えば、アウトバンドマーケティングの場合は顧客開発のためにより多くのお金を投入しなくてはなりません。 しかし、インバウンドマーケティングの基本は、ウェブ上で行うフリーリソースのマネージメントとコンテンツ作成、およびウェブに訪れてくれたユーザーの管理にあります。これらが良質なトラフィックと良質なビジターを集めることに繋がります。 ハイベロシティはインバウンドマーケティングを提唱しているHubSpotとともに、インバウンドマーケティングソリューションを提供しています。 インターネットには多くフリーソースが存在しています。例えば、googleの検索エンジンの
前回は第3章までご紹介しました。今回はデザインを最終的に完成に持って行くためのブラッシュアップに書こうと思います。 UIデザインをするための5つの工程 ロード第1章 スタディ ロード第2章 モックアップ ロード第3章 仮組デザイン ロード第4章 ブラッシュアップ ロード第5章 なんでもないようなことが幸せだったと思う 前回の仮組デザインがスムーズにいっていれば完成は間近です。ここからは最終的な「モノとモノの適切な距離感」を目で計りながら微調整を行います。この項は全体的に感覚的な話しが多いですがロジックで情報デザインを組み上げた後はノンバーバルでの良さを感じれるデザインを目指しましょう。 デザインに空気を流して全体チェック レイアウトしたオブジェクト(写真、文字、イラストなど)が適切な間隔で配置されているかの確認を行います。優秀なIAの書くワイヤーフレームなどであれば要素毎のマージンをピクセ
はじめに こんにちは、クラスメソッド株式会社の野中です。 HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1:インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。 対象者 対象者は主にコーダー、フロントエンドエンジニアです。 デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 CSS Spriteとは Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使わ
作成:2013/10/15 更新:2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML5を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ 1.勉強になるテクニック/サンプルまとめ 基本知識 2.セレクタ 3.メディア クエリ 4.コーディング規約 5.フォント 6.CSSスプライト 7.アニメーション 8.正確なHTML使用方法 9.CSSハック 10.書き方/読み方 定番まとめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く