小林 / Webデザイナー

フリーランスWebデザイナー / Webサイト制作の現場で使えるアイデア発信

小林 / Webデザイナー

フリーランスWebデザイナー / Webサイト制作の現場で使えるアイデア発信

大人フェミニンなやさしい印象の配色

やさしい印象を表現したい時に使える配色を紹介します。 大人、落ち着きを感じるフェミニンカラーを使ったカラーパレット。くすみ感のある色をチョイスすることでモダンなイメージを追加することができます。

100
小林 / Webデザイ…

    • [メンバー記事]信頼感を与えるグリーンベースの配色

      落ち着きや安心感を感じる深みのあるグリーンをベースとした配色を紹介します。 柔らか、穏やかといった落ち着いた雰囲気を出したい時や、信用、安心といった信頼感を与えたい時に使えるカラーパレット。 サムネイルのデザインは可愛らしいイラストにも合いますし、銀行などの固いイメージのデザインでも採用されているダークグリーンは、汎用性の高い色です。 ウェブデザインや資料デザインの配色を9パターンご用意しました。ぜひ参考にしてみてください！

      100
      小林 / Webデザイ…

      • 信頼感を与えるグリーンベースの配色

        落ち着きや安心感を感じる深みのあるグリーンをベースとした配色を紹介します。 柔らか、穏やかといった落ち着いた雰囲気を出したい時や、信用、安心といった信頼感を与えたい時に使えるカラーパレット。 サムネイルのデザインは可愛らしいイラストにも合いますし、銀行などの固いイメージのデザインでも採用されているダークグリーンは、汎用性の高い色です。 ウェブデザインや資料デザインの配色を9パターンご用意しました。ぜひ参考にしてみてください！

        0〜
        割引あり
        小林 / Webデザイ…

        • 料金プランのカードレイアウトの配色

          料金プランデザインの配色を紹介します。 以下がデザイン要件です。 3種類の料金プランを横並びにレイアウトする プラン内容の違いをリスト化して提示 各プラン詳細へのボタンをそれぞれに設置する やさしいイメージが欲しいので背景色は淡い色を採用する スタンダードプランにフォーカスが当たるように配色する デザインがこちら。 このデザインをベースに配色を施していきます。 配色の紹介

          100
          小林 / Webデザイ…

        大人フェミニンなやさしい印象の配色

        小林 / Webデザイナー

          イラストを使用したサイトのメインビジュアル配色

          イラストを使用したメインビジュアルの配色です。 以下がデザイン条件です。 Webサービスを紹介するサイト イラストを使用して親しみやすいイメージを表現 トーンはおさえてポップすぎず少し落ち着きのある配色 デザインがこちら。 このデザインをベースに配色を施していきます。 配色の紹介

          100
          小林 / Webデザイ…

          イラストを使用したサイトのメインビジュアル配色

          小林 / Webデザイナー

          Twitterで公開してきた色ツイートを集めてみた

          2021年からTwitterにて色に関するツイートを発信しています。 フォロワーの皆さんから好評いただいておりまして、ブックマークで保存して見返していただいているようなのですが、色ツイートの数も多くなってきているので「さすがにブクマだけでは管理できない。」というご意見はよく頂いておりました。 そこでこれまでにツイートしてきた色の画像を有料Noteにてご提供させていただきます。 画像の枚数は133枚。 先ほどのツイートのように色の紹介の他にも、レイアウトに合わせた配色や

          500
          小林 / Webデザイ…

          Twitterで公開してきた色ツイートを集めてみた

          小林 / Webデザイナー

          【CSS】ローディングアニメーションを擬似要素で実装する

          疑似要素を使ってローディングアニメーションを実装する方法をご紹介します。Twitterでもご紹介していた内容ですが、コードをコピペして利用してもらえるようにnoteでもご紹介しておきます。 まずは、デモをご覧ください。 ・デモ：https://pulp.style/demo/opening/ HTML <div class="opening"> …コンテンツ</div> CSS .opening::before { content: ''; position: f

          小林 / Webデザイ…

          【CSS】ローディングアニメーションを擬似要素で実装する

          小林 / Webデザイナー

          HTML5のフォームバリデーションの使い方

          お問い合わせフォームで、入力間違いを防ぐための機能としてバリデーションがあります。これまではjQueryでの実装が全てで、実装の手間がかかるものとして扱われておりました。その分の実装費用は別途必要な工数の内容だったのです。 しかし、HTML5からはinput要素が拡張され、jQueryを使用せずとも簡易的なバリデーションができるようになりました。type属性とpattern属性を利用し、簡易的なバリデーション機能の付与方法とスタイリングの方法をご紹介します。 ※表示確認用

          小林 / Webデザイ…

          HTML5のフォームバリデーションの使い方

          小林 / Webデザイナー

          地図デザイン作成時にこれだけは気をつけたい6つのポイント

          アクセスページに掲載する地図はGoogle Mapを利用するのが一般的です。 とても見やすく、表示領域以外の部分もスクロールで確認ができ、拡大縮小、またスマホであれば地図アプリへの移動して確認してもらうこともできるので、とても便利。 しかし、サイトデザインに合わせて地図を作成して欲しいというクライアントからの要望はあるので、たまに作成することがあります。 その地図作成の時に私がいつも気をつけている6つのポイントについてご紹介します。 ※地図画像が見づらい場合は、クリッ

          小林 / Webデザイ…

          地図デザイン作成時にこれだけは気をつけたい6つのポイント

          小林 / Webデザイナー

          私の情報の収集元について紹介してみる

          今年に入りTwitterを再開したので、メインの情報収集先はTwitter。 でも、ネット上にはもっとおもしろい情報が溢れているので、これまでに私が利用してきた方法も併用して日々情報を集めております。 そこから得られた情報はツイートやnoteのネタになることも。 今回はその情報収集の方法と収集元についてご紹介します。 Web界隈で仕事をしている方であれば既知のものが多いと思いますので、Web初心者の方に向けた内容となります。 ------- 情報の受け皿として「fee

          小林 / Webデザイ…

          私の情報の収集元について紹介してみる

          小林 / Webデザイナー

          スクロール後のアニメーション実装と調整方法について書いてみる

          先日noteにて以下の記事を公開しました。 スクロール後のアニメーションについて考えてみた 表示遅延や大きな動きさえしなければ、フェードインアニメーションを実装しても問題はないのでは!?という内容で、実際のサンプルを用意してご確認いただきました。 サンプル 自分が予想していたよりも賛成の方が多い印象です。 遅延やスピードの遅さが影響して閲覧しづらいというのが問題となっていたので、それを解消できるのであればアニメーションを肯定しても良いのかと。使いどころと調整さえすれ

          小林 / Webデザイ…

          スクロール後のアニメーション実装と調整方法について書いてみる

          小林 / Webデザイナー

          スクロール後のアニメーションについて考えてみた

          Webサイトのアニメーションについて色々と意見を見かけます。私としてはそこまで動きをつけない方が良いとは思いますが、クライアントからの要望はかなり多いです。 「見た目がいい。」 「めずらしい。」 「他にやっているところが少ない。」 こういったご意見をいただきます。クライアントからのニーズはあるのでできる限り実装したいのですが、要望通りの迫力のあるアニメーションは訪問者の閲覧には向きません。 ここで制作者側の適切な対応としては、訪問者の閲覧を邪魔しない程度のアニメーション

          小林 / Webデザイ…

          スクロール後のアニメーションについて考えてみた

          小林 / Webデザイナー

          「ヒアリングフォーム」のメリットと作り方について書いてみる

          Webサイト制作で欠かすことができない、クライアントからのヒアリング。一般的には紙で用意して記入してもらうか、対面で話しながら担当者が記入するかだと思いますが、私はヒアリングフォームを用意して、そこに記入してもらっています。 いつから使っているのか資料を確認したところ2012年からだったので、今年で8年。これまで特に不満を伝えられることはなく、逆に「フォームで書くの良かったよ。」と高評価をいただくことが多いです。 先日、上のツイートをしたところ、どういうフォームを用意して

          小林 / Webデザイ…

          「ヒアリングフォーム」のメリットと作り方について書いてみる

          小林 / Webデザイナー

          Webサイト制作を無料で学べる学習サイト

          私がWebサイトの勉強を始めた14年ほど前には、作るための情報はネット上にあったのですが、レッスン形式で作り方を学べるサイトはなく、いろんなサイトから断片的に情報を収集してページを作っていました。とても苦労して作成していたのを覚えております。 今はレッスン形式で学べるサイトはたくさんあるんですね。最近知った学習サイトをきっかけに色々と調べてみまして、良さげなサイトを7つ見つけたのでご紹介します。 これからWebサイトの作り方を学びたい人はもちろん、これまでに学んできた知識

          小林 / Webデザイ…

          Webサイト制作を無料で学べる学習サイト

          小林 / Webデザイナー

          Chromeを10年使ってきた私が厳選した拡張機能14選

          Chromeが日本でリリースされたのが2008年12月。1年ほど様子を見てから使用した経緯があるので私の使用歴は10年を超えたくらいになりました。 他ブラウザに浮気をせずにずっと利用してきているのは、Chrome拡張機能があるから。Web制作者が利用するのに便利な機能がたくさんあるので、他に変えられないんです。 そこで今回は、普段からガツガツ利用しているChrome拡張機能を14個ご紹介します。 Web制作をおこなっている人、noteやブログ、Twitterやっている人

          小林 / Webデザイ…

          Chromeを10年使ってきた私が厳選した拡張機能14選

          小林 / Webデザイナー

          フリーランスでデザインしている人が絶対に読んでおきたい無料note 47選

          2020年noteは確実に押さえておきたいものの一つ。去年の盛り上がり方を見ていればそれは自然と感じたと思います。 「今年は自分も始めよう！」と意気込み、参考となるnoteを見ておきたいと思ったのですが、優良なnoteをどう探せば良いのか分からず、見つけるすることが難しく感じたことがありました。「どこにあるの？」と。 昨年から色々と模索していたら、さまざまな優良noteと出会える手段を身につけることができて『スキ』のストックも多くなってきました。 そこで、同じようにno

          小林 / Webデザイ…

          フリーランスでデザインしている人が絶対に読んでおきたい無料note 47選

          小林 / Webデザイナー