2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends
そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイトを提供することができるなど、様々なメリットが生まれます。 今回は、2019年に流行するWebデザインの最新トレンドを一気にご紹介していきたいと思います。 2029年のWebデザイントレンドに関する記事を公開しました！最新情報を知りたい方はこちらをご覧ください。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
意味不明なことばかり言ってるUXデザイナー達の代わりに「UXデザインとは何か」を端的に説明しよう
釣りタイトルですみません。 でもね、世に言う「UXマン」っているじゃないですか。 いかにも自分は上流工程だと言わんばかりに様々なフレームワークや聞こえはいい理論を振りかざしているにも関わらず、自分では手を動かしてモノをつくらないし、いざつくってもらったらアチャーなアウトプットだす人たち。 そもそも「UXデザイン」には色んな解釈があったところに、“つくってなんぼ”のWeb業界にそういう人たちが少なからずいる（し、えてしてなぜかデカイ顔をしている）もんだから、もはやUXデザイナーという職そのものが胡散臭いと思われていることが多いんですよね。 前職の話になりますが、当初「UX推進部」という部署に属していたので、勤務外にもUX系の勉強会にはたくさん参加してみたけれど、ほとんどくっそ当たり前のことしか言ってない講演とか、Sketchはいいぞ〜って永遠に言ってるだけの集まりとか、本当に参加する価値がな
I ♥ wireframes
Tumblelog managed by Ivana Jurcic, Web Developer from Belgrade, Serbia. If you want to contribute contact me via email, twitter or post your wireframe in this flickr group. Facebook page Submit wireframes Archive RSS feed Adobe Proto Adobe® Proto, a new Adobe Touch App, lets you create interactive wireframes and prototypes of websites and mobile apps on your tablet. Communicate and share ideas wit
クオリティが高い縦に長いサイトを厳選して集めています MUUUUU_CHANG WEB DESIGN SHOWCASE
縦長のwebデザインをがむしゃらに集めています。
トップページは検索窓だけ--大胆なデザインに変更した神戸市の狙いとは
この2月から神戸市の公式トップページが、風景写真に検索窓を配置しただけという斬新なデザインにリニューアルし、話題となっている。リニューアルの経緯について、プロジェクトを手がけたペタビットのミキ チョクシ氏がCode for Kobeの定例会で説明した。 通常、自治体のトップページデザインは、市民への情報を発信する窓口として新着情報などのメニューがぎっしり並べられている場合が多い。だが、それで目当ての情報にたどり着けるのかといえば必ずしもそうとはいえず、神戸市のトップページも分析したところ、トップページの直帰率は50％以上と2人に1人は次のページに進まずに離れてしまうことがわかった。 ミキ氏らはさらに自治体サイトのトレンドを専門家の協力を得ながら分析し、そこから理想のあるべき自治体サイトとして、市民が困っていることを察知して用意するコンシェルジュとしての役割を果たせるようなページのあり方を提
Webサイトの見出しデザインまとめ13選！デザインの参考に | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト
絶対まねしたい！Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp
Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。 ドーナッツ これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。 ※ ドーナッツの幅は、percentageInnerCutout で調整できます。 ラインチャート お次は棒グラフです。フラットに見せるポイントは、グラフや線などを簡略化することでイラストのように見せるところです。また、数字と組みあわせるとかっこ良く見えます。※ 数字の部分は、CSSで組んでいます。 ※ 横軸のラベルは、意図的に減らしています。 バーチャート 棒グラフもフラットにしてみました。こちらも数
無料で30枚！スマホ対応HTMLテンプレート 初心者に優しいシングルページばかりを集めました
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる これっ！ 太っ腹すぎて降参です。 こんなにクオリティの高いHTMLテンプレートを無料で放出するなんて。僕にはできん！ と感嘆の声をあげながら、レスポンンシブでスマホ対応可能なシングルページばかりを集めました。 一枚のhtmlファイルをメインに構成されてるので、初心者でもソースを理解しやすく、Web系じゃないフリーランスやクリエイターのヒトもポートフォリオやプロフィールページの作成に活用できると思います。 ランディングページとして新商品やアプリのキャンペーンに利用してもいいかも。 ちなみにHTMLテンプ
2016年はアクセシビリティの年！注目するべき3つのポイント - DMM.comラボ デザイナーズブログ
こんにちは、デザイン部でフロントエンドエンジニアをしている村岡です。 私は、前職の経験などを踏まえて、名刺に「アクセシビリティアナリスト」という肩書きも入れさせてもらっています。 今回は、2016年4月に施行される障害者差別解消法によって努力義務が課せられる、Webアクセシビリティの意識するべきポイントと重要性について書こうと思います。 Webアクセシビリティは機会損失を防ぐ Webアクセシビリティは「障害者・高齢者対応」だと思っていませんか？ 確かにそのような側面が強くありますが、本質は「状況・環境に依存せず、誰もが情報にアクセスしやすくすること」です。 近年では、一人で複数のデバイスを持ち、様々な環境で Web にアクセスすることは当たり前になりました。 このようにデバイスや環境が多様化していくと、音が出せない、画面が見えないなど、 一時的になんらかの機能が使用できなくなる場面が出てき
のぶしな玄米珈琲 - NOBUSHINA GENMAI COFFEE -
「信級玄米珈琲」の公式ブランドサイト。長野県信級の炭焼き職人がつくり出した優しい味わいの玄米コーヒーです。
さぁデザインの参考に！おしゃれな海外ギャラリーサイト10選
WEBサイトの制作を検討している、WEBマーケティング担当者の皆様。日々の業務をこなす中で、サイトデザインのイメージを明確にするのは、経験者でもない限りなかなか難しいものがありますよね。 しかし、WEBデザイナーへの要件定義において、イメージを明確化できないと、思ったような成果物が得られないのもまた事実です。抽象的な言葉だけでデザインを決めることはできません・・・。 そんなサイトデザインに悩むWEBマーケティング担当者の皆様のために、参考になるWEBサイトデザインがまとめられた、海外ギャラリーサイト１０選をご紹介します。国内ギャラリーサイトにも、秀逸なサイトがありますが、今回はおしゃれな海外ギャラリーサイトを厳選して、ピックアップしてみました。 ※ECサイトを制作する方は、ぜひ「ファーストビューで差がつくECサイトのデザイン８選｜２０１５年版」も、一緒に参考にしてください！ 1. Medi
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
skuare.net
CodePen - Front End Developer Playground & Code Editor in the Browser
I/O 3000
新着記事
イケサイ WEBデザイナーのポータルサイト
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
