アニメーションする背景をCSSで簡単に作れる・「Animated CSS Background Generator」
Animated CSS Background Generatorはボケやレクタングルなどシンプルなオブジェクトがアニメーションする背景をCSSで簡単に作れるWebアプリです オブジェクトの数、サイズ、スピードやカラーを設定するだけで作成可能で、コードも発行してくれるのでWeb制作の知識が無い方でもコピペで使う事が出来ます こんな背景が作れます。JS不要なのは良いんですが、オブジェクトを増やし過ぎるとHTMLやCSSのソースが比例して増えるのでJSで作った方が良いケースもあるかもしれませんね とはいえCSS製を1から作るのは非常に面倒なので覚えておいて損はないかなぁと思います Animated CSS Background Generator
2/3 Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About
Masonryの使い方：サイズの異なるBOXをタイル状に整列(2ページ目)大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。 ボックスを隙間なく整列してくれる「Masonry」の使い方 それでは、できるだけ無駄な空間が出ないように隙間を詰めて複数のボックスを自動配置してくれるスクリプト「Masonry」の使い方をご紹介いたします。下記のStep.1～3の通りに記述してみて下さい。 Step.0 自サイトへの設置は不要 (※設置することもできる) Step.1 HTMLに「Maso
![2/3 Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d598cb7c9e1437f59a7459deffaf32757e9eedb/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F4%2F9%2Ftopimg_original.png)
Adobe XDをデザイン・プロトタイプ制作だけでなく様々な方法・場面で活用してみよう - ろくデブログ
この記事は Adobe XD Advent Calendar 2017 19日目の記事です。2017年10月19日にリリース版になった XD。その魅力について前の記事では “他のデ...
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
「だから、そのデザインはダメなんだ。」改めてwebデザインの基礎を考えさせられたので少し反省。 - Traveling Creator's Life
READ MORE こんにちは、ちびまや（@Mayayan6）です。 最近読んだ、webデザインに関する本で、いろいろと考えさせられることがあったのでそれをまとめます。 webデザイナーとしてこれから頑張ろう！って人のために役立てば嬉しいです＾＾ クライアントと制作側の「伝えたい情報」と、ユーザーの「知りたい情報」の差 最近、とあるピラティス系のスタジオサイトを運営したりしてて、クライアント側から、「今度はこれを売りたい！」とか「この新しい情報を全面に押したい！」といった依頼をいろいろと受けます。 確かに、新しい情報を押すのも大切なんですが、ときどき立ち止まって考える必要があるなと思いました。「ユーザーが知りたい、探している情報はどれか」という点を。 サイト側が伝えたい情報に導いていくことを「導線」、ユーザーが自ら知りたい情報を求めて動いていくことを「動線」といい、おなじ響きでも意味合いは
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
これからのWebデザインは、コンポーネント化を意識しよう
2016年6月14日 Webサイト制作, Webデザイン Webデザインのプロセスが変化しています。以前「実践で学ぶWebサイト制作ガイド まとめ」という記事でWebサイトの制作手順を紹介しましたが、この方法はまだ使えるものの、徐々に廃れていくでしょう。最近ではこの記事で書かれているように、画面にあるパーツ（部品）のみを用いてデザイン・コーディングするのではなく、あらかじめ様々なパーツを作っておいて、それを組み合わせて画面を構成していく方法に移りつつあります。今回はそんなパーツをまとめた「コンポーネント」について考えてみましょう。 ↑私が10年以上利用している会計ソフト！ コンポーネントとは？ Webデザインにおいて、コンポーネントとは機能を持つ各パーツ（部品）の集合体です。例えば料金表ひとつとっても、テキストや線、ボタン、色など、様々な情報を組み合わせて作られていることがわかります。それ
メガメニュー・メガドロップメニューを実装しているwebデザインのショーケース - NxWorld
情報量が多いサイトで特に見かけることが多い、メガメニュー・メガドロップメニューを実装しているwebデザインのまとめです。 メガメニュー・メガドロップメニューとは表示面積が広いドロップダウンメニューのことで、上手く利用すればスペースを有効活用して、ユーザーが目的のページまで容易に辿り着けるようなナビゲーションを実装することができます。 ホバー展開するもの、クリック展開するもの、テキストのみを使用したもの、わかりやすい画像・アイコンを用いたものなど、同じメガメニューでも様々な表示方法やデザインがあるので、自分がこういった動きやデザインをしたいときに参考にさせてもらえそうなwebデザインを備忘録兼ねてまとめました。 紹介しているサイトのキャプチャは、それぞれホバーしてもらうとメガメニュー表示時のデザインに切り替わります。 ページ左上のロゴ下にあるカテゴリーにホバーすると各カテゴリーが表示され、更
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
ノンデザイナーがそれっぽいWebデザインを作る話 - CAMPHOR- Blog
この記事は CAMPHOR- Advent Calendar 2014 の10日目の記事です。 こんにちは、みかさ（@To_Mikasa）です。 今日はデザイン初心者である僕が、Photoshopを使ってWebサイトのデザインをしていく上で、「それっぽく」していくためにやったことをざっくり書きたいと思います。ざっくりです。 はじめに デザインの知識を付けたり、流行をキャッチアップするために、コリスやPhotoshop Vipは 普段から見ています。とても参考になる記事ばかりです。 参考にするサイトを探す ノンデザイナーにとって０からデザインを考えるのはツラかったので、 デザインの参考にするためにイケてるサイトを３個選びました。 自分が作りたいイメージに似たものを選ぶといいかもしれません。 １つだけを参考にするとあれなので、それぞれのいい所や好きな所をそれっぽく組み合わせました。 ワイヤーフ
これからのWeb制作スタイルとプロトタイプの考え方 - よつば手帖
近年、プロトタイプやフレームワークと言った言葉をよく耳にします。 どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。 閲覧環境と利用者の変化 Webサイトの役割の変化について スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。 PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。 Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。 コミュニケーション的視点の重要性 Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。 利用者の見方が変わって来ているの
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
『色を色で見ないで』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基本的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事や趣味とリンクさせながら理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ
人気Webデザインを独学できる至高のWebアプリ8選がヤバイ！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）
Loading...
SVG MANIAX - CSS Nite After dark7
