デザインの基本を顧みることもたまには必要ですよね。 分かりやすいイラストで、Webデザインに大切な10の要素をまとめたインフォグラフィックを紹介します。 10 Basic Elements of Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 元ページでは大きなインフォグラフィックがダウンロードできるので、壁紙やプリントしてポスターにしてもよいと思います。 ※掲載する上での画像加工も許可を頂いています。 ラインとは、デザインの最も基本的な要素です。ラインは絵を描くときのペンや鉛筆のストロークであり、グラフィックデザインでは2つのポイントを繋ぐものです。 ラインはスペースを分けたり、目を特定の場所に惹きつけることに役立ちます。例えば、コンテンツとヘッドラインとサイドパネルを分離するためにどう使うか考えてみてください。 カラ

デザイナーとは何をするひとなのか、どこまでデザイナーなのか。定義は人それぞれですが、様々なことを知るにつれじぶんの定義も変わっていくのを感じながら日々過ごしています。言語化するのはなかなか難しいのですが、以前書いた「デザインする上で大切にしていること」からもう少し広いお話です。 デザイナーとは何か 「デザイナーとアーティストは違う」これは高校生のころに教わって今でも指針にしている言葉の一つです。「デザイナーはクライアントの代弁者、デザインは問題解決」というのがじぶんの認識です。見た目だけのデザイナーはだめ、デザイナーのエゴではだめ、全くごもっともですが、では「デザイナーが見た目にこだわるのは悪いこと」なんでしょうか？ どこからがデザイン？ デザイン書を開けば、配色、レイアウト、フォトレタッチ、文字組…デザイナーが手を動かす範囲はとても広くなっています。では、どこからが「デザイン」なのでしょ

ベネッセグループ ベネッセグループ なんばパークス -NAMBA PARKS- なんばパークス -NAMBA PARKS- 英語を使っていても日本語の表記がとなりにあるとうれしいですね。 OPEN-WORLD-ACADEMY OPEN WORLD ACADEMY 斜めの線でクールな印象を受けますね。 武蔵野美術大学 武蔵野美術大学 山崎医院 山崎医院 猿田彦神社 猿田彦神社 株式会社リラク 株式会社リラク テキストが中央にあっても色を置くことでわかりやすくなりますね。 DENKI屋 DENKI屋 着ぐるみプラス 着ぐるみプラス タイトル部分に『ページ上部へ』のテキストが入っているのが珍しいなと思いました。 東急電鉄 東急電鉄 ナブコ自動ドア ナブコ自動ドア ＳＧホールディングス ＳＧホールディングス 東京TYフィナンシャルグループ 東京TYフィナンシャルグループ 東京工業大学 東京工業大学

寒い冬が終わり、ついに花で溢れる春がやってきました！ ワクテカしながら春に関するデザインや素材を集めたので、今日はそれをまとめてご紹介したいと思います。 春デザインの参考画像 バナー・メインビジュアルなどで、春っぽいあしらいのものを集めてみました。 コードアワード コードアワード ピンクのベタ塗り背景に桜の花びらを散らしています。今をときめくフラットな感じの仕上がり。 minne 【締切りました！】「minneマルシェ in 門司港グランマーケット2015春」出展作家さま大募集！ | ハンドメイドマーケットminneお知らせブログ イラスト内に桜の木と花びらを配置したデザイン。春カラーの「グリーン×ピンク」とマルシェ（フランス）カラー「ブルー×レッド×ホワイト」が絶妙にマッチしています。 脱毛なら脱毛サロンのエピレ｜epiler【公式】 脱毛なら脱毛サロンのエピレ｜epiler【公式】 切

仲良くして頂いているブログ maka-veli.comで書かれていた「そろそろグラフィックリッチなメタファ、スキュアモーフィックとか楽しいコラージュも欲しくなってきた 」を読んでいて、スキュアモーフィックについてもうちょっと見たくなったので僕も記事にしてみます。 1.スキュアモーフィックデザインとは？ 2.スキュアモーフィックデザインとフラットデザインの違い 3.スキュアモーフィックデザインのメリットとデメリット 4.様々なスキュアモーフィックデザイン 5.最後に 1.スキュアモーフィックデザインとは？ まず、スキュアモーフィックデザインっていう言葉をご存知でしょうか？ スキュアモーフィック、スキュアモーフィズムといった言い方がされますが、デザイナーさんなら馴染みのある言葉かもしれません。簡単に説明するとユーザーインターフェース（UI）において、リアルに存在する物質、質感に近づけたデザイン

こんにちは。年末ですね。クリスマス、忘年会、年越し、お正月と忙しい時期でしょうか。お仕事もラストスパート頑張りましょう。 最近ランディングページでも、フラットなデザインだったりわりとシンプルなデザインを作ることが多くなってきている気がします。昔のようにごりごりに装飾を使うというよりも、“今っぽい”シンプルおしゃれなものを作りたいですよね。そこで参考になりそうなものが、雑誌のデザイン(エディトリアルデザイン)です。紙とWebなのでそのまま真似るのは難しいですが、ちょっとしたあしらいなら参考にできそう！今日はそんなあしらいを紹介します。 版ズレ風文字 カンタンだけど結構おしゃれに見える、そんなあしらいです。基本的には濃いフチに薄い色をズラすのが良いかと思います。見出しに使えそう？ 鉤括弧 鉤括弧といっても普通の「かぎかっこ」ではなく、細めに大きめに、テキスト全体を囲うように使うのがポイント。こ

図形の認識、カラーの見極め、文字の美しい字詰めなど、Webデザインに大切なスキルが自分はどのくらいなのか分かり、しかも勉強にもなるスキルチェックサイトを紹介します。 ちょっとした暇つぶしにチェックするだけでなく、定期的にやるとスキルがアップしてるのを実感したり、今日は体調悪いなという目安にもなりますね。

2014.10.15 こんにちは！ 最近ササッキーと呼んでいただけるので、喜んでこの名前で記事書いていきます(｡･ω･｡)ゞ 本日は、 に感化され、これのデザイナーバージョンを公開しちゃおう！と思い立った次第です。 デザイナーがトップデザインする前にすべきこと、またその理由を4ステップで紹介しています。 前提として、ユニオンネットではディレクターさんに打ち合わせ～サイトマップ＆構成＆ワイヤーフレームを作成して頂いております。 よってその確認が最初のお仕事になります。 私の場合ですが、 の流れでトップデザインを制作しています。 目次 サイトマップの確認 ワイヤーフレームの確認 ディレクターさんとの打ち合わせ 参考サイトによるイメージ固め 手書きラフ デザインに落とし込み デザインのご質問お受けします 1.サイトマップの確認 まずは、サイトマップの確認をします。 どんなコンテンツがあるの？注力

スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で

ウォーターカラーエフェクト（水彩画風）を取り入れているwebデザインのまとめです。 ウォーターカラーはふわっと優しい雰囲気のサイトによく使われている印象があり、以下で紹介させていただくのもそういった感じのサイトが多めですが、それ以外にもクールなデザインや幻想的な雰囲気を持つデザインなどもあります。 また、特にこれから水彩画風デザインをやってみようと思う方には参考になると思うチュートリアルエントリーも併せて紹介します。

はてなブログをやるようになって、SEO対策やウェブの便利なサービスなどサイト運営で役立ちそうな情報をたくさん見るようになった。 自分でイチからHPを作成していたら、SEO対策もとても大変だったと思うけど、はてなブログを使っているのでその辺はあまり気にせずにすんでいる。 ありがたや。 先日、はてなブログのAdsenseの表示について調べていた時、よく目にしたのがLinkWithinの表示方法についてだ。 LinkWithin - Related Posts with Thumbnails 記事の最後に、関連記事を画像と一緒に表示してくれるサービス。 はてなブログでは結構使っている人が多いみたい。 そういえば、記事の最後に表示しているところが多かったような…。 というのも、記事下部にあっても、私は流し見であまりきちんと見ないことが多い。 一方、サイドバーの注目記事なんかはよく見るんだけど。 ま

quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょうか。（特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ！） それで今回はＬＰやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため

こんにちは、結婚式で悪友に高校時代のポエム的なものを晒されたゆうすけです。 そういうの、本当勘弁してほしいんだよな。 先日Macの古いデータを整理していたところ、2008年頃のウェブサイトのキャプチャー画像を大量に発見。当時はWebデザイナーではなくエディトリアルデザイナーだったのですが、デザインの練習（模写）のために取り溜めていた様子。 あの頃の自分は結構真面目だったのかもしれない。 やっぱり今とだいぶ違うなー。具体的にどこが変わったのかな？と結構楽しく眺めていたのですが（どうしてアナログデジタル問わず、掃除をすると懐かしくて手が止まってしまうのか！）、せっかくなので記事としてまとめてみることにします。 当時の担当デザイナーがもしこれを見たら、恥ずかしくてたまらないかもしれないですけどね。一度世に出したものですからね。しょうがないね。 大阪府知事に橋下徹氏が就任し、船場吉兆があの伝説的な

こんにちは、工藤です。 ただいまレスポンシブの勉強中・・というか効率的な進め方を模索中です。 それぞれ1つのファイルで済む分、ソースが汚くなってしまったりUIの面で悩んでしまったり、なかなか難しいです。 そんなこんなで今回は参考にしたいレスポンシブのサイトを集めさせていただきました。 日本語サイトのみのご紹介です。 ゆい動物病院 http://yui-ah.com/ ウィンドウを小さくしてもテイストが損なわれないのがすごいです。 項目もそれぞれ見やすいです。 LIFA http://lifa-motosu-nagara.jp/ 最初メインビジュアルの文字組みが変わっているなあと思ってウィンドウを小さくしたら・・ すごく考えてつくられているなあと思いました。 TEIBOW Cosmetics http://www.teibow.co.jp/cosmetics/top.html ビジュアル部分

ブログって、ページ送りがついてますよね。一覧にも、記事詳細にも。先日気付いたのですが、 記事一覧のページ送りは『右』にいくほど過去になって、詳細ページは『左』にいくほど過去になるサイトが多いのです。 これって何か変じゃない？という疑問をWEB屋の皆さんにぶつけてみましたので、いただいた回答をまとめます。 何が言いたいか よくあるページ送りはこんな感じなんです。 記事一覧のページ送り 記事詳細のページ送り 仮に最新の記事の詳細とします。『次』にあたる記事がない場合こんな感じになっています。 記事一覧は右に行くほど過去なのに、詳細に入ったときにページ送りの方向が変わるのが何か気持ち悪いなぁという事なのです。 （ちなみに、説明上『前の記事』『次の記事』というボタンを置いていますが、普段は記事タイトルを表示させています） 記事詳細のしっくり来るページ送り こっちの方が矛盾がないというか、しっくり来

今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼

こんにちは。先週は風邪をひいてしまい、社会と完全に切り離されていました。休むのも大切ですが、あまり長く休むと復帰するのが恐くなりますよ…。 さて、Webデザインをしていてなんとなーくマンネリしてきてしまうのがボタンのデザインです。ちょっと忙しくなったりすると、ボタンのあしらいが似てきたりしますよね。「このデザイン、キミの中で最近流行ってるの？」なんて言われちゃったり…。 そんなボタンですが、求められる役割として『押したくなる』がそこそこ重要となってくるのではないでしょうか。どんなデザインだったら押したくなるかなあ…と考えつつ…デザイン…。してますか？ 色ひとつで押したくなる度が変わってきたりもします。最近ではグリーンが訴求力が高いと言われていますよね！ しかし色以前に、「え？なんかこのボタンおかしくね？ｗ」と突っ込まれてしまったら もうそれが気になってしまって訴求力どころではありません。

デザインする時、手段ばかり追ってしまい、「( ﾟдﾟ)ﾊｯ!そもそもの目的ってなんだっけ」ってなりがちなので、気を付けたいなと思いまとめてみました。 1. 目的をしっかりと認識する 例えば、上のようなボタンをデザインしたとき、「もっと目立つように大きく、色も赤とか目立つ色にしてください」という修正指示を受けたとします。 「目立たせる」という目的の解決策として、「大きくする」、「赤などの目立つ色を使う」という2つが考えられています。そしていつの間にか、これらの解決索が目的にすり替わっていることが無いでしょうか。 「大きくする」、「赤などの目立つ色を使う」ことを行えば目的を達成できるかのように錯覚するのですが、その解決策は本当に最適かを考える必要があります。そもそもの目的は「ボタンを目立たせること」で、その解決策は他にもあります。 2. 他の手段も考える 「目立たせる」ためには、差別化する、近