タグ

レイアウトに関するkimu12のブックマーク (5)

  • デザインのどこを直したらいいの?「デザインまちがい探し」であなたのデザイン力を確認! | コリス

    デザインはセンスも大切ですが、「知識」や「経験」も大切。 レイアウトや構図、色の組み合わせ、文字組み、ハイライトやシャドウ、1pxのラインなど、知らない人には気がつけないポイントがたくさんあります。 左と右のレイアウトで、異なる箇所をいくつ見つけることができますか? 「デザインまちがい探し」は先日紹介した「なるほどデザイン」から出版社の許諾の元、書面を掲載させていただきました。 大きな画像も用意したので、チャレンジしてみてください! デザインまちがい探し 左と右のレイアウトで、デザインに手を加えた箇所があります。全部でいくつ見つけることができますか? 左(ビフォー)・右(アフター)の各画像はクリックすると拡大され、並べて表示できます。

    デザインのどこを直したらいいの?「デザインまちがい探し」であなたのデザイン力を確認! | コリス
  • レスポンシブデザインにすぐ使える!すごいアイデア30個 | コリス

    サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行

    レスポンシブデザインにすぐ使える!すごいアイデア30個 | コリス
  • Webデザインの基本が身につく!ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ

    最近のWebサイトで見かけるさまざまなレイアウト、レスポンシブ対応のレイアウトの構成、縦長ページ・横長ページでグリッドの効果的な使い方、ランディングページの要素の配置など、デザインの勉強になるインフォグラフィック・リソースを紹介します。

    Webデザインの基本が身につく!ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ
  • レイアウト作りを簡単にしてくれるCSSグリッドシステム

    CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね! Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは? CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

  • デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素

    元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいw はじめに:デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ

    デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
  • 1