Webを取り巻く技術の進歩で、グラデーションやシームレスな背景パターンなど、Webサイトをカラフルに彩る技術も発達していますが、いまだに根強い人気を誇るのが「白」をベースとしたWebサイトです。もともと、HTMLやCSSのデフォルトでも背景が白地だということも、採用される理由のひとつです。しかし、最近立ち上げられたWebサイトでは、新しい意味での「白地」の使い方を提案しているようです。 そこで今回は、Web技術が発達したいまだからこそ押さえておきたい「白」ベースのWebサイトの構築の7つのポイントを、事例とともにお伝えしていきます。 デザイナーがあえて白地を使う理由 王道の白地背景パターンですが、まだTableレイアウトが主流だったWebの黎明期と比較すると、デザイナーは少し違った意味合いで白地のデザインを選択することが多いようです。通販サイトやブログでは昔から頻繁に使われていましたが、最

この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1.  MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです。サイト自体シンプルで使いやすく、またカテゴリー分けが詳細でとても探しやすいサイトです。 2.  現代デザイン 技術的、デザイン性がすぐれたサイトを収集したギャラリーサイトです。カテゴリーは業種と色、日時のみですが、業種を細かく分類しています。また、気に入ったサイトをブックマークに入れることができます。 3.  I/O 3000 国内外問わない、秀逸なデザインのサイトを収集しているギャラリーサイト

TumblrでWebデザイナーがフォローすべきアカウントを10個厳選してご紹介します。 Tumblrは画像や動画、文章など、様々なメディア形態で投稿できることから、グラフィックだけに留まらず様々な方法でデザインのインスピレーションを得ることができます。英語・日本語アカウントを織り交ぜて取り上げていますので気になるアカウントはぜひフォローしてみてください。※括弧内にアカウント名を表示しています。 １. All The Style Guides（allthestyleguides） 様々なサイトのスタイルガイドとパターンライブラリを紹介している、非常に勉強になるアカウントです。どうしても自分が知っているスタイルガイドばかりを参考にしてしまいがちですが、こうやってまとめてあると新たなスタイルガイド、パターンライブラリに出会うことができてとてもありがたいですね。 ２. House of Butto

なんとなくゆる〜い感じに仕上げたい、脱力感がほしい、そんなときにお役立ちの商用可能なゆるふわな日本語フォント10選をご紹介します。 まじぱねぇ ゆるさでは、No.１かもしれません。すこし丸字気味のギャル文字風手書きフォントです。文字が入れ替わっているのが特徴で、たとえば「ね」→「Ne」、「し」→「U」、「ん」→「ω」のようになっています。ひらがな、カタカナ、英数字が入っています。 モフ字 名前のとおり、モフモフとした曲線のみでつくられたフォントです。半角英数・半角カナ・ひらがな・カタカナ・アルファベット・ギリシャ文字・ロシア文字・ 第一水準漢字が収録されています。 ふんわりラウンド 名前のとおり、ふんわり、ふっくら膨らんだようなフォントです。ひらがな、カタカナ、数字、アルファベット、記号の一部が入っています。ゆる~くやさしい雰囲気を出したい時などに使えそうですね。 にくまるフォント まんま

アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい

この記事では、商用利用ができる日本語の明朝フォントフリーフォントを10個厳選して紹介します。様々な場面であなたのデザインのサポートをしてくれる便利なフォントばかりです。 １. うつくし明朝フォント 流れるような字体の美しいフォントです。ひらがな、カタカナがオリジナルのもので、漢字はIPAex明朝フォントを使用しています。軽やか・滑らかな印象が作りやすいフォントです。 ２. IPAex 明朝フォント IPA（独立行政法人 情報処理推進機構）が配布しているフォントです。文章中のひらがな・カタカナ・漢字は固定幅に、アルファベットは変動幅で表示されるようになっており、このフォント１つで整った日本語の文章を表現することができます。 ３. はんなり明朝 「り」の文字が特徴的なフォントです。こちらは、ひらがな、カタカナのみのフォントで、漢字・記号・英数字はIPA明朝フォントを使用しています。やわらかい雰

ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「

Webやアプリに携わるデザイナーにおすすめの企業ブログを厳選しました。各社が提供しているサービスの事例や、ノウハウ、最新トレンドなどあらゆる情報が公開されているので、ぜひチェックしてみてはいかかでしょうか。 dwango creators’ blog http://creator.dwango.co.jp/ 株式会社ドワンゴのデザイナーが運営している、2015年11月にできたばかりのブログです。ニコニコのサービスに関連した記事や、現場で活躍しているデザイナーが実践している便利なTipsが紹介されています。 1pixel http://ameblo.jp/ca-1pixel/ 株式会社サイバーエージェントが運営しているクリエイターズブログです。サイバーエージェントのゲームやWebサービスで使用されている技術や、話題の音楽配信アプリ「AWA」の開発秘話などが掲載されています。 DeNA Cre

今回はモバイルアプリのUIデザインをするときに参考になる素晴らしいスライドを紹介します。 モバイルアプリはWebデザインとはまた異なった視点が必要になってきます。モバイルアプリ特有のデザインフローや、プロトタイピング手法について学びたい方におすすめです！ アプリUI勉強会 in ネットイヤーグループ

手描き風のイラストはかわいらしさや温かみ、親しみやすさを演出するときにはぴったりですが、たくさんありすぎてどこから探し始めていいのかわかりません。また、イラストはイラストでも、お仕事では使いにくいクセのあるようなものもあり、選ぶのに時間がかかります。 今回はお仕事でも使いやすく、無料で、商用利用も可能なイラストがダウンロードできるサイトを紹介します。どのサイトでも基本的にjpgまたはpng形式のイラストをダウンロードすることができます。 ※細かな規約はサイトごとで異なるのでダウンロードするときはよく確認しましょう。 いらすとや クレヨンで書かれたようなやわらかい雰囲気のイラストが特徴です。イラストの種類・シチュエーションが豊富です。タイムリーな話題を取り上げたイラストも制作していらっしゃいます。 基本的には商用利用可能ですが、以下の場合のみ有償となります。 ・素材を20点以上使った商用デザ

SteveはFreshEssays.comのWebライター、著者、コンテンツプロデューサーです。彼は常にオンラインコンテンツの新しい届け方を模索しており、他のブロガーや著者、学生などにライティングの補佐をしたりもしています。 何を伝えたいのか全くわからないランディングページに辿り着いた経験はありませんか？　そのページはきっと明確なメッセージを伝え損ね、あなたを混乱させただけです。そんなページにどれくらい滞在していましたか？　そんなページをわざわざ時間を掛けて掘り返してまで、その目的を知りたいと思うでしょうか。これこそが、人々があなたのページに辿り着いたときに考えられる最悪のシナリオです。 あなたはランディングページを訪れた来訪者に、すぐに商品の購入ボタンをクリックしてほしいでしょう。そのためには、何がおすすめか、なぜそれがユーザーにとって価値があるのか、そして登録の方法を分かりやすく提示し