MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
少しのアイデアで大きく変わる!Webデザインのコツ

少しのアイデアで大きく変わる!Webデザインのコツ

公開日:2021年06月21日
最終更新日:2021年06月21日
h.yamaguchi
デザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > 少しのアイデアで大きく変わる!Webデザインのコツ
このエントリーをはてなブックマークに追加
少しのアイデアで大きく変わる!Webデザインのコツ
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは、デザイナーのはんちゃんと申します!

Webデザイナーとして2年の間働いてきて、少し工夫するだけでデザインのクオリティがUPするコツがたくさんあることに気づきました。

今回はその中からどなたでも気軽に実践しやすいものを紹介していこうと思います!

    「余白」のアイデア

    Webデザインの余白には、コンテンツごとの区切りをわかりやすくしたり、情報を整理して見易くしてくれる効果があります。

    ボタンの余白

     


      

    ボタンと中の文字の間隔を少し大きめに取るようにするだけで、窮屈な印象がなくなり、視認性が高く押しやすいボタンになります。

     

    文章の余白

     

    文章と文章の間の余白を詰めすぎないまたは開けすぎないようにすることですっきりと読みやすく、洗練された印象を与えることができます。

    「あしらい」のアイデア

    シンプルなデザインの中に少しのあしらいをプラスすることで、オリジナリティのあるデザインにすることができます。

    ボタンのあしらい

     

    ただ図形の上に文字を載せるだけでもボタンとして成立しますが、そこに矢印などのあしらいをプラスするだけでよりボタンであることがユーザーに伝わりやすくなります。

     

    タイトルのあしらい

     

    ただ文字を打ち込んだだけよりも、タイトルらしいあしらいを追加することでよりユーザーの目線を集中させることができるようになります。

    「色」のアイデア

    色ひとつをとっても、少し色数や色味を調整するだけで表現の幅を広げることができます。

    ボタンの色

     

    ボタンにプラスで色を使用することで、ユーザーの目線を留まらせることができます。また、ポップなテイストのサイトを制作する際など、色数の多い画面の中でボタンが埋もれてしまわないようにする工夫としても役立ちます。

     

    写真の色

     

    写真の上に色をのせるだけで手軽に雰囲気を変えることができます。また、写真の上に文字を入れたい場合には、単色をベタ塗りで使用するよりもグラデーションを用いることにより奥行きのあるデザインに仕上げることができます。

    最後に

    いかがだったでしょうか?

    Webデザインのどの要素を取っても、少しの工夫で大きく見え方が変わるものがたくさんあったと思います。

    この記事が皆さんの制作に少しでもお役に立てたのなら幸いです、ここまで読んでいただきありがとうございました!


    【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

    Udemyを実際に体験した方の感想記事もぜひご覧ください♪

    関連コンテンツ


    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
    Webデザイン
    デザイン
    公開日: 2018年03月26日
    最終更新日: 2018年03月26日
    【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    パンフレット・リーフレットの違いと活用方法
    デザイン
    パンフレット
    公開日: 2017年09月06日
    最終更新日: 2017年09月06日
    パンフレット・リーフレットの違いと活用方法
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    企業様必見!DTP広告の活用方法!
    デザイン
    パンフレット
    公開日: 2017年12月02日
    最終更新日: 2017年12月02日
    企業様必見!DTP広告の活用方法!
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
    デザイン
    公開日: 2020年10月12日
    最終更新日: 2020年10月12日
    初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
    h.yamaguchi

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    なんか物足りない…デザインにひと工夫!簡単テクニック10選
    Webデザイン
    デザイン
    公開日: 2018年01月25日
    最終更新日: 2022年01月17日
    なんか物足りない…デザインにひと工夫!簡単テクニック10選
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    日本語フォントの役割と分類を知って、適切なフォント選びをしよう!
    デザイン
    デザイン
    公開日: 2017年02月17日
    最終更新日: 2022年01月17日
    日本語フォントの役割と分類を知って、適切なフォント選びをしよう!
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
    デザイナー
    デザイン
    公開日: 2016年12月19日
    最終更新日: 2022年01月17日
    デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
    Webデザイン
    デザイン
    公開日: 2017年01月18日
    最終更新日: 2022年01月17日
    Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    デザイン制作で、色を選ぶのに困っていませんか?
    デザイナー
    デザイン
    公開日: 2018年04月13日
    最終更新日: 2018年04月13日
    デザイン制作で、色を選ぶのに困っていませんか?
    オンスタ運営

    Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
    残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
    エンジニア
    オンライン学習
    オンライン学習キャンペーン情報
    デザイナー
    デザイン
    プログラミング
    制作
    公開日: 2019年11月07日
    最終更新日: 2022年01月17日
    残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
    • # Python
    • # Udemy
    • # セール情報
    • # タイムセール
    オンスタ運営
    全記事一覧

    web制作者にオススメのオンライン学習サイト「Udemy」

    世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

    世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

    「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。