タグ

ブックマーク / www.webcreatorbox.com (6)

  • カフェのWebサイトを作る時のポイントや実例

    2023年5月18日 Webデザイン, インスピレーション おしゃれだったり、かわいかったり、落ち着く雰囲気だったりと、一口にカフェといっても様々なコンセプトがありますよね。そんなカフェのWebサイトをあれこれ見て気づいた点や、カフェの雰囲気を反映させたWebサイトの実例を紹介します。 ↑私が10年以上利用している会計ソフト! カフェのWebサイトをデザインする時のポイント さまざまなカフェのWebサイトを調査しながら感じた共通点や、制作時のポイントなどを見ていきましょう。 店内の様子を大きく見せる カフェは店内の雰囲気を重視している場合が多く、それをどうWebサイト上で表現するかが重要です。画面いっぱいに広がる大きな画像や動画で視覚的にアピールしましょう。可能であればお客さんがいる状態での写真も掲載し、どのような客層が多く利用しているのか、座ったときの客同士のスペースなども見せられるとい

    カフェのWebサイトを作る時のポイントや実例
    oh-kaz
    oh-kaz 2023/05/19
  • 日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

    2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! ↑私が10年以上利用している会計ソフト! 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

    日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
    oh-kaz
    oh-kaz 2023/02/17
  • デザインは第一印象が大切!5秒でできる3つのデザインチェック方法 | Webクリエイターボックス

    2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう! ↑私が10年以上利用している会計ソフト! ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター>ぼかし>ぼかし(ガウス)で5〜10pxほど画像をぼ

    デザインは第一印象が大切!5秒でできる3つのデザインチェック方法 | Webクリエイターボックス
    oh-kaz
    oh-kaz 2016/05/11
  • Webにも紙にも使える、囲み枠デザインの基本テクニック

    2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです! ↑私が10年以上利用している会計ソフト! 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20%オフ!」「期間限定!」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時

    Webにも紙にも使える、囲み枠デザインの基本テクニック
  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • ミュシャ(Mucha)から学ぶ優美なデザイン | Webクリエイターボックス

    2013年3月23日 インスピレーション アール・ヌーヴォー様式を代表するグラフィックデザイナー、アルフォンス・マリア・ミュシャ(Alfons Maria Mucha)。美しい女性やきらびやかな装飾類、花、華麗な曲線を使用したデザインが特徴で、生涯を閉じた今も多くの人を魅了し続けています。今回は私の大好きな彼の作品を紹介してみようと思います! ↑私が10年以上利用している会計ソフト! ミュシャの作品の特徴 女性と花 彼の作品の多くは女性をメインに花とともに描かれています。髪に飾ったり画面に花をちりばめたり。画家というよりもグラフィックデザイナー・イラストレーターとして活躍していたため、対象物を非常に鮮明に描いています。背景には暗色の幾何学模様や草花を、メインとなる女性には明るい色を使い、どこに焦点をあてているかがわかりやすい。 背景の模様 背景にはアール・ヌーヴォーの特徴である草花と曲線に

    ミュシャ(Mucha)から学ぶ優美なデザイン | Webクリエイターボックス
  • 1