デザインの神は細部に宿る！最近のWebサイトで見かけるナビゲーションのアイデアのまとめ
Webサイトをデザインする時にナビゲーションをどうするか、けっこう頭を悩ませると思います。コンテンツを見せるために、サイトの構造を伝えるために、ページを移動するために、ナビゲーションはデザインで重要なアイテムです。 最近のWebサイトで見かける新鮮なアイデアが取り入れられたナビゲーションを紹介します。デザインなどの見た目だけでなく、操作性やインタラクションも非常によくできているものばかりです。 Nick Jones デザインに黄金比を取り入れることがあると思いますが、この発想はなかった！マウスのスクロール、キーボード操作で黄金分割されたコンテンツを次々に表示します。 その仕組みは、CodePenで公開されています。 110% ナビゲーションの今までの概念がくつがえされるかもしれません。 このサイトのナビゲーションには、2つの大きな特徴があります。まず一つ目は、中央にフローティングされたパネ
ケーススタディ：ヴァージンアメリカ航空を上場に導いたUXデザイン
今やWebデザイン業界のスタンダードとなっているレスポンシブデザインですが少し前は違いました。 今日は2014年に航空業界初のレスポンシブデザインを取り入れたVirgin AmericaのWebサイトについて、デザインからローンチに至るまでを詳しく見ていきたいと思います。 過去数年で最も影響力のあるWebプロジェクトのひとつとなったこのプロジェクトの、成功までの軌跡を細かく見ていきましょう。 Virgin Americaはプロジェクトのパートナーとして当時、従業員わずか10人にも満たない新しい会社だったWork & Coを起用しました。彼らとのコラボレーションは、果たしてどのような結果となったのでしょうか？ 結果的には、航空業界初のレスポンシブWebサイトとして、Work & Coの急激な成長へと導きました。今やVirgin Americaの案件には、100人以上の人々が関わっています。
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
デザインのインスピレーションが得られる最強Webサービス7選
毎日のようにデザインをしていると、良いデザインが思いつかなかったり、前回と同じようなデザインが完成してしまったりと、どうしてもデザインに行き詰ってしまうことがありますよね。 私自身まだまだ未熟なこともあり、デザインに行き詰ることはよくあります。そんなとき、私は極力仕事中でもカメラ片手にボーっと散歩に出たりして、どうにかインスピレーションを刺激させようとするんですが、散歩に出られないときや、散歩に出ても何も思い浮かばなかったときなどは、いくつかのWEBサイトを見てインスピレーションを刺激させます。 ｢インスピレーションの刺激になるぞ｣と思ってブックマークしたサイトはいくつもあるんですが、今回はその中から、とくに皆さんに紹介したい利用頻度の高い7つwebのサービスを紹介したいと思います。ではどうぞ！ 1.Dribbble Dribbble これはかなり有名なサイトですね。いまさら紹介するまでも
非WEB屋でもサイトが作れる驚異的サービス／『サイトを作る』という敷居がどんどん低くなっていると実感する物色々 | バンクーバーのうぇぶ屋
先週くらいのお話ですが、“カナダで留学した後自分たちでスモールビジネスをやるからサイトが欲しい、でもお金無いから自分たちで作りたい。”的な相談があって、「そんな、サイト作るだけのサービスなんぞ、腐る程あるわぁああ！！」と、半分ヤケくそになってお話したので丁度いい機会だからまとめてみようと思います。 まぁ、今日はどちらかというと、完全に非WEB屋な人に向けたサイト自体を作るサービス、問い合わせなどのフォームを作るサービス、ユーザーテストを低コストで行うためのサービス、そういう物をご紹介していこうと思います。 たぶん、趣味やとりあえずサイト作りたいと思っている人には朗報として、とりあえずサイト作れる人がWEBデザイナーだと思っている人へは啓発（的な？）として、記事を書かせて頂けると幸いです！ 加えてたまに、「サイトが作れるようになりたい。」と僕の元に来てくれる人がいますが、もしそういった人が「
主婦におすすめ！副業でお小遣い稼ぎに最適なWebサービスいろいろまとめ6つ - M3Q
リクルートの運営するバナー制作のクラウドソーシングサービス。バナーを実際に配信した上で効果の高い順にランキングをつけるタイプの案件と、投稿されたバナーをクライアントが直接買い取るタイプの案件があります。
ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : LINE Corporation ディレクターブログ
こんにちは、NHN Japanのマッチングサービス事業部でマーケティングを担当しているotakeです。 今回は担当サービスの運用業務と並行して出稿も担っている忙しいディレクターさんやこれから出稿業務に携わる方のために、チャッチャと読んで現場ですぐに使える実戦的なナレッジの一部を「バナー広告制作の基礎知識」として書かせていただきます。 当事者意識を持たせるAttentionを考える ユーザーの購買行動において、バナー広告が担うポジションはAttention（注意）喚起にあたりますが、一般的にバナー広告は誰に注意を促すものなのでしょうか。 検索から目的を持って能動的に何かを探しているわけではないが、潜在的な関係性を秘めているのがバナー広告の対象となる潜在層。ここに位置する対象には”この広告はあなたに関係あるものです”、”おそらくあなたの話です”といった潜在欲求に気づきを与える「当事者意識を高め
Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳
web制作で使えるWebサービスや、Webツールなどをご紹介。 小分けして紹介していた分もあわせてまとめています。定番の物からマニアックなものまでお楽しみください。 グラフィック・創作 10,000s Cool FREE Seamless Patterns-パターンファイルジェネレータ Web制作でもよく背景で利用するパターンファイルを作成する素晴らしいジェネレータ。様々な模様があり、色は決めれますので、組み合わせはほぼ無限です。 Pixlr Photo Editor-オンラインフォトエディタ 世界で最も人気とされるオンラインフォトエディタ。OSを選ばない。 photoshopに近いインターフェイスと、ブラウザさえあれば動くという使用が人気。ユーザー登録しなくても利用できる（したほうが便利）。 Vintage Effect-レトロ、ヴィンテージエフェクト 上のPixlr.comが運営するも
今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのうぇぶ屋
最近、フォント名を知らないデザイナーが増えてきていると思うんですよね。 実は使ってるんだけど、どのフォントを使っているか意識していなくて、「これ何のフォント？」と聞くと、「ちょっと待ってくださいね。調べます。」という会話を良く耳にするようになったような気がします。「会社のPCに入ってたー」みたいなノリでしょうか。 というわけで、今日は僕がWEB屋をやってきた中で、「最低限、これは知っておいた方がいいんだろうな」と思ったフォントを幾つかご紹介。 英文フォントを中心に、色々有名どころを総当りしていきます。主に僕が仕事で使ったことがある物を中心に紹介していきますね。（順不同、のつもりで僕の好きな順） Helvetica 世界中のデザイナーに愛されるデザイナーフォントと言えばやっぱりHelveticaですよね。 元はスイスのデザイナーによって作られたフォントでMacだと標準フォントのひとつになって
僕のWEB屋人生で見つけたテクスチャ、パターン系の素材サイト全部 | バンクーバーのうぇぶ屋
もはやタイトルのまんまなんですが。 僕がWEB屋を初めてから、背景やボタンのアクセントに使うようなテクスチャとかパターン素材とか、とにかく沢山見て来た物をメールから、ブックマークから、チャットから、Evernoteから引っ張り出して数ある限りご紹介させて頂きます。 僕の場合は、こういうサイトを見てテクスチャのアイデアを探すことの方が多いですね。 ちなみに数も多いので、devianaartやらeverystockphotoなどの超有名どころは外しています。では、早速見ていきましょう。 Subtle Patterns | Free textures for your next web project 種類はそこまで多くないですが、使いやすい感じのパターン素材ですね。個人的に一押し！ Texture | Premium Pixels 以前の記事でご紹介した、ハイクオリティなPSDがダウンロード出
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
WD101: Webは見た目のコントロールがきかない
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML （ときどき JavaScript）を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pingendo
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
http://www.hp-stylelink.com/news/2013/07/20130716.php
Bootstrapだけじゃない！マッハでフラットや美しいデザインのUIが導入できそうなワイヤーフレームやUIキット等色々！ | バンクーバーのうぇぶ屋
ランディングページ(海外)
ゲーム感覚でレイアウトを組み立てる、HTML5+CSS3に対応したレイアウトジェネレーター -PageBlox
http://designaholic.cc/2011/08/web-10.html
