使い方aboutお問い合わせ広告掲載Webデザイナーが捗る!知識を増やす最近のトレンドまとめ作成:2014/09/29更新:2014/11/01WebデザインWebデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。(SVG)10.グリッチUI・他11.ゴーストボタン12.プレースホルダー13.ローディングエフェクト14.pushState15.ドロアーレイアウト16.タイルレイアウト17.エディトリアル風デザイン配色1.ネオンカラーInCubネオンカラーのように明度の高い発光色も今年の流行りだということでチェック。目立つ色なので図形(円や六角形)などの一部に取り入れたり透過させたり。した印象にならないように少し変化をつけるのがポイントです。こちらのサイトによるとInCubはネオンカラーを取り入れ世界観を表現しているとのことです。outSolasiéフラットカラーは自然界に存在しない色が多く、高彩度・大きい塗りを多様するので必要以上に目立つものが多いです。トレンドを意識しながら刺激を抑えた配色にしたい。そんな時は、明度(明るさ)が高く、彩度(鮮やかさ)が低い中間色のパステルカラー。淡い色を使うことで刺激の少ない柔らかい、落ち着いた印象を出すことができます。パステル系の配色を使ったサイトも増えているということで。こちらは洗いざらしといいますか色あせたような配色を使ったサイトギャラリー。new3.グラデーションMarvelベタ塗りから脱却したい時。フラットデザインの良さをそこなわせず、複数の色(色相)を組み合わせたグラデーションを取り入れたいときはこちらを参考に。グラデーションを取り入れることで他とは違った印象を残すことができます。同じ色相で明度差をつけます。colors4.マテリアルデザイングーグル提唱のマテリアルデザイン。こちらはアンドロイド・Webサイトなどで使えそうなカラーパレット一覧。Developers.IO)を参考に。guidelines模様5.ジオメトリーUNUSTMジグザグ線、ひし型や三角形などで構成された模様を背景やパーツの一部に使うサイトも、少しだけ見かけるようになりましたね。新鮮な印象なので、ロゴなどの一部に使うだけでも注目させられてしまう。Design)を参考に。キーフレームの定義は、「@-webkit-keyframes」+「任意の名前」、始まりと終わりの状態は「%」を使います。Kakuishi7.スクロールで背景固定、コンテンツだけ動かすたまに見かける、スクロールすると背景固定でコンテンツが持ち上がる仕組み。fixed;を使うだけ。スクロールしても動かないようにfixedで背景を固定します。CodePenbackground-attachment-スタイルシートリファレンスモバイル:ある程度スクロールした後、検索ボックスをヘッダーに固定する方法。Productions背景に写真を大きく使うだけでは物足りない。一部分を注目させたいときは、GIFアニメーションの一つである、写真の一部だけ動きをつけループさせるシネマグラフも有効かと思います。株式会社LIGに作り方が載っています。Painterを使った方法。作成した線画をSVG形式で読み込み、0から徐々に線画が完成されていくような過程をアニメーションで実現します。確実に視線が止まりそうです。(1/2)|先端サイトに学ぶCSS3/jQueryアニメーションデザイン10.グリッチこちらはテキストにグリッチ・アートのようなエフェクトをつけたCSSテクニック。見かけないのでロゴやテキストの一部に使うと面白そうです。PluginUI・他11.ゴーストボタンBilder画面いっぱいの写真背景の上に、細めの白い線のボーダーで囲んだ大きめのボタンを見かける機会が増えました。テキストのみかアイコンを入れ余白を取ります。以下の情報によると、ボタンの背景が透過しているように見えるから、そう呼ばれるようになったとのこと。背景色がないので写真の邪魔にならないなどの理由があります。いえ分かりやすくないとボタンの意味がないので、ボタン自体は視認性とか操作性をハッキリさせ、ボタン内の文字は可読性を高めて見せることが第一優先かと思います。In12.プレースホルダーフォームの入力箇所で、メール・パスワード・URLなど灰色の文字で入力のヒントを表示する仕組み。フォームの周囲にテキストを置かなくてよくなります。見栄えもスッキリし場所をとらないなどのメリットがあります。プレースホルダーの解説と作成方法はこちら。BlackFlag13.ローディングエフェクトトップページのファーストビューで大きな画像や動画を使った場合、ページ表示が完了するまでに時間がかかる場合があります。こちらは、SVGを使ったページ遷移のアニメーション処理とjQueryで簡易版のローディング画面を作る方法。Freebies14.pushStatepjaxのようにページ遷移なしでURLを変更、ページの一部だけ更新しながらURLも変更する方法です。コンテンツを表示するまでの時間を短縮。最近増加傾向にあるスペースの制限を解決するUI。多いですけど、これからもガンガン増えていくと思います。横からスライドして出てくるメニューの実装方法。Pluginパネル要素をタイルのように敷き詰めた見せ方をします。タイルレイアウトを取り入れたWebサービス・キュレーションサイトもよく見かけるということで。タイルレイアウトを簡単に実現すべくjQueryプラグインを用いた使い方。Labs17.エディトリアル風デザイン雑誌のような見せ方をするサイトを作る前に読んでおきたい情報。紙面と比べるとレイアウトの自由度は少ないものの、動画や音声を使えるのも強み。こちらは読み手の視線や意図を考えて効果的な図や写真等を整理・配列・編集あるいは計画するエディトリアルデザインについて。いった工夫をすればガーリーな雰囲気を出せるのかわかります。動きのある雑誌風なサイトも増えそうなので一度おさらい。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2015/04/27他と差がついた!最近のトレンドをおさえた一歩進んだエフェクトまとめ今回は光の屈折や歪み・パーティクルなエフェクトをブラウザ上で表現可能にするチュートリアルをまとめました。ありきたりな見せ方をやめて、表現の幅を広げたいと感じたときに。2015/07/27コンテンツを盛り上げる、逆引きデザインテクニック渾身の文章なのに読まれない、どうも読み飛ばされてる感じがする。先週、実務で役立つ逆引きレイアウト2016/10/11意外と見逃してたかも!配色の知識が増える記事10デザインの印象の大部分は配色によって決まるといっていいほどです。しないデザインにならないように、配色や色彩の使い方が上達する知識をまとめました。セパレーション2016/12/26404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。いうよりもユーザーは確実に離脱してしまうでしょう。コメントデータの処理方法の詳細はこちらをご覧ください。