フォームのデザインをかっこよくするテキストボックスのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「テキストボックス」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 テキストボックスは入力フォームの中でも基本のコントロールになりますので、デザインセットでのサンプルも掲載しております。 シンプルだが確実にテキストボックスの見栄えを良くするCSSデザイン例。テキストボックスにフォーカスすると、ラベルが上に移動するシンプルなデザイン。See the Pen Animated Textbox by Stefan C. (@stefcharle) on CodePen. よく見るタイプのデ

こんにちは、デザイナーの花ちゃんです！ かれこれ3年ほどLIGブログで記事を書いていますが、最近意識していることがあります。それは、文字だけではなく、できるだけ視覚的に情報を伝えるということです。最初は文章を書くことに必死でしたが、よりわかりやすく、最後まで楽しく読んでもらうにはどうしたらいいかを考えるようになり、たどり着いたのが「図解」でした……！！ 今回は、図解を作るときのポイントやグラフ作成時にやりがちな失敗例、ストックしておくと便利なチャート図のデザインパターンをまとめてみました。 【図解を作るときにおすすめの素材】 👉フリーイラスト素材サイト39選【デザイナー厳選】 👉無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 【一からWebデザインを学びたい方へ】 現場で活かせるWebデザインの基礎をしっかり学びたい、現役デザイナーに教えてもらいたい……という方は、

余白：余白が雰囲気と想像性を生む 参照：Twitter 余白を設けることで下記5つの効果が期待されます。 ① 強調効果 ② 印象操作 ③ 見やすさの向上 ④ 情報の整理 ⑤ 想像力をかきたてる 余白を少なくしているデザインはどうしても勢いやチープさが勝ってしまいますが、女性はイメージや印象で商品やサービスの良し悪しを判断する傾向もあるため、余白を十分に取り入れて作成することがポイントです。 フォント：伝えたいイメージも包括して選択する 参照：ソフラン Aroma Rich フォントはゴシックで太く作成するよりも細く繊細な方が女性の感性を刺激します。 上記参考画像にも使われている手書き風フォントもアクセントに入れると、より伝えたいイメージを想起しやすくなります。 また、コピーと本文にメリハリをつけることによって伝えたいメッセージを効果的に目につかせることができます。 伝えたいイメージと、何を

おつかれさまです。デザイナーのみやです。 Webデザインのトレンドは2〜3年ごとぐらいの大きな潮流がありつつ、既存のトレンドに一工夫加えたものが流行ったりと、メジャー／マイナー問わず刻々と変化していっています。新しい時代への対応だったり、世代の移り変わりによる好みの変化などにも影響されながら変わっていくので、クリエイターとして常に追いかけていく必要があります。 2022年に入って結構経ってしまいましたが、今後直近で流行りそうなデザインを参考とともにピックアップしました。 ※最新2023年版のWebデザイントレンドは以下記事をご覧ください！ 👉注目のWebデザイントレンド10選【2023】 ※今回こちらの記事を参考にしています 22 inspiring web design trends for 2022 10 Web Design Trends To Expect in 2022 Top

フォトショップで漫画コミックのようなイラスト風に加工する方法は、人気エフェクトのひとつです。 画像を差し替えるだけのお手軽エフェクトやベクターイラスト風に仕上げる方法も紹介しましたが、今回はより手軽に漫画イラスト加工ができるデザイン素材をまとめてご紹介。 ワンクリックするだけでプロのような仕上がりを実現できる、他と差のつく便利デザインツールが揃います。 アクション素材の使い方もとてもシンプルなので、はじめての人でも簡単に利用することができます。 フォトショップで写真を水彩イラスト風に一発加工！おすすめ素材25選 まずはAdobe公式サイトより、Photoshopを無料でダウンロードし、7日間のお試しからはじめてみませんか。1087円/月からフォトショップが使える、フォトプランもおすすめです。 フォトショップで漫画コミック風イラストに一発加工！おすすめ素材10選 Urban Sketch –

メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。

最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9

なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで

バナー広告やスライドの見栄えがしっくりこなかったり、テキストが読みにくいと感じたことはありませんか？もしかするとその問題、「配色」を見直すだけで解決できるかもしれません。 まず下のバナー広告をご覧ください。 黒、青、ピンクの３色が使われていますが、読みづらく毒々しい印象です。 このバナー広告のデザインは一切変えずに、色のみを変更してみましょう。 いかがでしょうか。デザインはそのままでも、配色を見直すだけで印象を大幅に変えることができました。 本記事の目的は誰でも適切な配色ができるようにすることです。美術やデザインに明るくない方でも、ルールやコツを身につけることで上手に色が扱えるようになります。基本知識の解説に始まり、バナー広告の配色NG例から便利なツールまでご紹介します。 バナー広告のデザインについて学びたい方はこちらの記事もオススメです。 【事例付き】バナー広告のデザインがイケてないとき

【サブタイトルの置き場に困ったら】線と図形だけで作れるサブタイ付タイトル サブタイって意外と曲者ですよね…！汗 パワポでも作れます。 #graphicdesigner #webデザイナー #イラストレーター… https://t.co/G37FLEeECW

こんにちは、デザイナーのしーちゃんです。 突然ですが、デザイン時にアイデアが出なくなってしまったことはありませんか？ 私は何度もあります……。 そういうときの解決策は色々あると思いますが、私の場合はネットで色々検索して、他のデザイナーの方々のデザインを見ることで新たなアイデアのヒントを得ています！ まだ解決策が確立していなかったり、いつもの解決策を行ってもなかなかアイデアが降りてこないとき、この記事で紹介するサイトを見て着想を得ていただけると幸いです！ AIGA （Eye on Design） 画像引用元：AIGA AIGAはアメリカにある最も古く、最大のデザイン会員組織です。 Eye on Designブログには、デザインに関するいくつかのユニークなトピックがあって、教育やタイポグラフィの記事など、多種多様な記事が掲載されています。 また9つの主要なカテゴリに分類されていて、一気に色々な

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第10弾は、デザインの原則とフォントやシャドウに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Ten. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 近接: 重要なデザインの原則です、上手く使いましょう 2. UIに含まれる要素は常に区別できるようにデザインする 3. 見出しと本文の両方に最適なサンセリフフォント 4. 見出しと本文の両方に最適なセリフフォント 5. フォントの組み合わせを探す時はSuperfamilies 6. シャドウは繊細に はじめに 次の

ディレクターバンクの烏田です。自社のデジタルマーケティング運用を外部の専門家や代行会社に外注しようとしても、外注先候補からの提案内容が的を得ず、誤差を埋めるためのやりとりに時間ばかりかかり、スピーディに進まない……それは、もしかしたら委託先候補に対する「RFP（Request For Proposal：提案依頼書）」の書き方に問題があるのかもしれません。 今回、数々の企業ホームページのリニューアルや運用経験をお持ちのWebディレクター・中西妙子さんに、受託側から見て、ニーズと条件がわかりやすく、良い提案をスピーディに（一発で）まとめるためには、どのようなRFPを発注者側は書くべきか？アドバイスをいただきました。ぜひ、今後のRFP作成の参考にしていただければ幸いです。 RFPを作成することで、求める要望を整理する まず、RFPとは企業が外部の業務代行会社などに対して、業務委託を依頼する際に用

先日、当ブログのデザインを変更しました。 ブログデザインをリニューアル＆ブログタイトルを「ラブグアバ」に変更しました！ デザイン変更とは言え、今回はテーマをまるっと差し替える対応になったのですが、そうなると困るのが作成中テーマの確認方法です。 さすがに現在稼動しているブログに作成中テーマを適用するわけにはいきません。せっかくのデザイン変更、サプライズ感を出したいですから。 で、私が思い浮かんだのは、 ローカル（自分のパソコン）に環境を作る別ブログを立ち上げるくらいだったのですが、今回デザイン変更をお願いしたQtaroさんが「Theme Test Drive使うと良いですよー」というのを教えてくれました。で、使ってみたのですが、これがめちゃくちゃ便利だったんですよ！ もしこれがなければ、作成中テーマの確認ができない上に、本番環境へ新テーマを適用する際にももっと手こずってしまうのは間違いなかっ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

「UI/UX」はもはやWEBデザインやアプリ開発において、無くてはならない存在となっています。実際にWEBサービスやアプリに触れて確認することも大事ですが、資料でまとめて勉強するのもありですよね！ そこで今回は、日本中の「UI/UX」に関する資料を気合いで全部集めてみました！（たぶん） それでは、早速みていきましょう！ UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

作者はNobuoさん。Principleというテーマも作成されている方ですね。 とにかくかっこいいので、紹介したいと思います。無料で高機能でSEOにも強いWordPressテーマを探されている方必見ですまじで。初心者でもCSSをいじらずともとても綺麗になるレスポンシブデザインのテーマです。 シンプルでかっこいいレスポンシブデザイン 出典：マテリアル ブログのホームページとなるビューはこんな感じ。シンプルなカード型、タイル型のデザインで、「こんなトップページにしたい！」なんて人も多いのではないかと。 出典：マテリアル さらにスクロールすると、カテゴリごとの記事が出てきます。これは嬉しい機能ですね。普通は最新記事一覧しかホームって設置されていなかったりするんですが、記事が多くなってくると、埋もれてしまうんですよね。これがあれば読者は自分の行きたいカテゴリに行きやすいですね。 さらにサイトバーに

ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね？」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてすごいなーとおもったアプリや、無料でもざくざく使えそうなものまでご紹介。 Moqups Free Plan (offers 2 active projects and 5MB of storage) Monthly：Standard active project 10 で $9〜 ログインしなくても無料で組めます。 960gsグリッド表示可能です。 ほぼコンポーネント揃ってます。ほぼ装飾なしなステン

Page not found The content you are looking for does not exist. Error 404 |

Pingendo Bootstrap 4 builder Design, build and deploy web pages in a flow. Pingendo is a modern tool for designers, developers and web agencies. Intuitive as stacking blocks, powerful as a text editor. Download it for free