2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
省スペースでモバイルユーザーへのストレスも少ないことから、現在多くのサイトに導入されているタブメニュー。今回はタブメニューを導入したけどデザインが決まらない……という時、参考になるサイトをまとめました。 1.吹き出し系 まずは、オーソドックスな吹き出し風デザインのタブメニューから。吹き出し風は当サイトでも一時期採用しており、はてなブログでの導入方法は以下の記事にまとめています。 参考記事 サイドバーに吹き出し風のタブメニューを作る なんばパークス http://www.nambaparks.com/ 吹き出しのツノが特徴的な、なんばパークスのタブメニュー。オーソドックスなデザインですが、細部を変えることでオリジナリティを出しています。 ポカリスエット公式サイト http://pocarisweat.jp/ ポカリブルー色のタブメニューが目を引くサイト。ブルーと白のコントラストが綺麗です。
メインビジュアル、キービジュアル、タイトルバナーとか呼ぶのでしょうか。 ＷＥＢサイトのメインになるイメージ画像のデザイン集。メインイジュアル制作の参考に。 サイトイメージを端的に表現したもの、コンバーションに直結しそうなものを中心に集めてみました。
数年前からWEBのみに留まらず、様々なデザインに取り入れられているテイスト、「和風」。 独特の配色やレイアウトからなる「和風テイスト」ですが、いざ取り入れようと思ってもなかなかアイディアが出てこなかったり。 なので今回のエントリーでは、日本的なデザインが素晴らしい和風WEBサイトをガッツリまとめてみました。 眺めて感性を刺激するも良し、和風WEBサイト構築のネタ元にするも良し☆ 純日本的デザインのウェブサイト27選 1.多田屋 2.櫻山（おうざん） 3.花咲かZ【ズィー】 4.Japan.illbe.net 5.にっぽんと遊ぼう | NIPPON TO ASOBO 6.はなみち舎 7.和三盆本舗 8.第五十六回全日本剣道選手権大会 9.【華鳥風月】 10.葵山葵 AOIWASABI 11.間人温泉郷 昭恋館 よ志のや (吉野家) 12.そらいろ - きょうの、日本の天気 13.日本舞踊 宗
縦長のwebデザインをがむしゃらに集めています。
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
※煮詰まる× → 行き詰る○ なんかおもいっっきり日本語間違って使ってました。めっちゃごめんなさい＞＜ 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ
ネクタイやスーツ、ブリーフにハットなど、いかにも男性的なグッズやサービスの数々からデザイン性に優れているロゴを30種類選び抜いた「ロゴデザイン30選」です。 パッと見ただけで男性向けのものだとハッキリ伝わってくるデザインは、男性をターゲットにしたデザインを手がける機会がある人は必見と言えそうですし、そもそも男性向けのロゴはあまり見かけないので、見ているだけでも結構楽しめます。 男性的なロゴデザイン30選は以下から。30 Cool Masculine Logo Designs | Naldz Graphics 1：Brandress タキシード風のデザイン。 2：Mr.Bahamas ハットと星でポップな印象です。 3：Nobilis ダンディーな雰囲気。 4：Men’s Underwear ボクサーブリーフがアルファベットの「M」っぽくなっています。 5：Sunny 赤いサングラスとモヒカ
ここ2ヶ月以内に作られたばかりという新鮮なデザインのロゴ50種類です。どのロゴも一目で内容が把握できる上に人目を引く優れたデザインとなっているので、これから先何かのデザインをする機会がある人の参考になるのではないでしょうか。 ロゴ50種類は以下から。Awesome Logo Designs In March And April ? 50 Logos | Design your way 01：Allibone 02：Art Eagle 03：Ayvi 04：Bazooka 05：Billy Turf 06：Book Cover Cafe 07：Casa dei Curiosi 08：CAT 09：Charge 10：CinEmpire 11：Crazy Idea 12：Dance Police 13：Dino 14：Dionysus 15：eco motion 16：Elegant Cust
インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基本的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it
ランディングページの厳選デザイン・リンク集／ランディングページ最適化・作成に関する情報掲載サイトです。
RSS feeds My Tweet ご利用上の注意 広告枠の販売 バナーサイズ別 728 × 90（134） 468 × 60（138） 234 × 60（112） 125 × 125（88） 88 × 31（90） バナーカラー別 □ ホワイト（389） ■ ブラック（272） ■ グレー（77） ■ レッド（160） ■ オレンジ（150） ■ イエロー（83） ■ グリーン（142） ■ ブルー（178） ■ パープル（25） ■ ピンク（92） ■ ブラウン（71） 地域別 日本国内（521） 海外（42） 詳細検索 728 × 90 468 × 60 234 × 60 125 × 125 88 × 31 □ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 日本国内 海外 PR広告 ”バナーデザインギャラリー”とは バナーデザインギャラリーは、皆様からのご投稿情報を基に、かっこいいバナー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
