グリッドビューはEC系のアプリでよく使われる手法ですが、これには何か理由があるのでしょうか？　シンプルなリストビューよりグリッドビューの方が成果が上がるのは、どのような場合でしょうか？　この記事では、グリッドビューについて細かく見ていきつつ、双方の問いに対しての答えも探っていきたいと思います。 グリッドビューとは グリッドビューとは、標準のリストビューに代わる、コンテンツの表示手法です。グリッドビューは水平方向と垂直方向の両方に、２つ以上のセルを配列することで成立します。

大企業だけのものではないデザイン原則は、ひとりのデザイナーがマニフェストとして明示することもありますが、最近は多くの企業がスタイルガイドと一緒に作られることが多くなりました。ここで言うデザイン原則とは、タイポグラフィや配置といったデザインするためのノウハウではなく、「我々が考える良いデザイン」が文章として表されたものを指します。つまり、自分たちのスタンス（立ち位置）を示したものです。 Material Design だと、以下の 3 つの原則があります : 実世界にも通じる空間と動きをメタファとして扱う力強く、視覚的であると同時に意図的動きを通して操作や表示の意味を伝えるまた、Facebook のデザイン原則だと、「ユニバーサル」「一貫性」「使いやすさ」など１単語でシンプルに表現されています。もちろんこれだけだと分かり難いので解説が添えられています。例えば「一貫性」であれば、再利用できるも

オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov

なるほどデザイン 作者: 筒井美希出版社/メーカー: エムディエヌコーポレーション（MdN）発売日: 2015/07/31メディア: Kindle版この商品を含むブログを見る 非常に明快にデザインの基本を学べます。 レイアウト、ディテール、色などがビジュアルを使ってわかりやすく説明されており、この本自体のデザインもいい感じです。 デザインの美しい本なので、紙の本もしくはフルカラーの端末で読むことを強くおすすめします。 Fire タブレット 8GB、ブラック 出版社/メーカー: Amazon発売日: 2015/09/30メディア: エレクトロニクスこの商品を含むブログ (28件) を見る 実務経験のあるデザイナーにとって当たり前のことではありますが、時には基本に立ち返ってみるのもいいかもしれません。 これからデザインを学びたいデザイナー、ディレクターにおすすめです。

TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ

参照：Leo Chuối ユーザー目線のデザインてどんなものだろう、と考えていた所、海外のWebデザイン研究サイト"onextrapixel.com"から面白い記事を見つけましたので、以下に翻訳してご紹介します。 （参照：Why Designers Should Design to Incite Emotions） ユーザーの心に響くウェブデザインとは ユーザーをひきつけるウェブサイト 感情を動かす・心に響くデザインの実現は、Webサイトの訪問者に格別なユーザーエクスペリエンスをもたらす最もパワフルな方法です。数年前までは、Webデザイナー達が気を払うべきは幾分か基礎的な事で済みました。例えばデザインをスタンダードなWebサイトに寄せて行くとか、明快なナビゲーションを付けるとか、適切なレイアウトやフォントを選択するといったことです。 広がるWebデザイナーの役割 しかし、現在ではWebデザ

はじめまして。デザイナーののっちです。 好きな業務の1つがバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて……」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。これは新米デザイナーなら、誰でも一度は通る道だと思います。 そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。 独学でつまずいていませんか？ バナーデザインの作り方を効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年2月に編集部が情報を更新し

こんにちはデザイナーの藤田です。 テレビなどを見ていて、一時期あまり見かけなかったのに「おや、最近また○○をよく見かけるな。あらためて見るとやっぱりいいな。」なんて思った経験、皆さんもありませんか。 というわけで今回は「おや、最近スプラッシュページを設けたWebサイトよく見かけるな」と感じたので、スプラッシュページ・スクリーンを設けたWebサイトをまとめてみました。 1. TWLVR http://twlvr.com/ フランスの動画・Web制作会社のサイトです。 ローディング完了後、女性の後ろ姿をリピート再生しております。 振り向きそうで振り向かないのが残念ですが、スプラッシュページからスクロールをおこなった後の演出が素敵です。 2. Failsworth 1903 http://www.failsworth1903.com/ イギリスの帽子メーカのサイトです。 国内サイトではあまり見か

TL;DR どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回は Web デザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。 レイアウトの基本知識 １．分割、対称、軸 何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。 レイアウトのパターン | イディア：情報デザインと情報アーキテクチャ Photoshop の機能拡張はこちら。 黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがう Photoshop の機能拡張 | コリス ２．イラストから