ミスタードラゴンズこと立浪和義監督のスタンプをリリースいたしました！
汎用性の高いワードを多く取り入れましたので普段使いにもってこいです！
またクリエイターズスタンプですので値段もお求めやすい120円となっています。
弊社では立浪和義監督の他にもドアラのスタンプなど沢山のスタンプを
取り扱わせていただいております。
ドラゴンズのスタンプを使って一緒にドラゴンズを応援していきましょう！
価格 120円
ご購入はこちら
価格 １２０円
ご購入はこちら
価格 １２０円
ご購入はこちら
価格 １２０円
ご購入はこちら
価格 25０円
ご購入はこちら
価格 12０円
ご購入はこちら
Webに限らず、デザインを作る際はコンテンツ間の余白を意識して作ると思います。
デザインする際の余白の取り方によっては、サイトの持つイメージが大きく変わってきます。
そこで今回はより良いデザインを作るための余白についてまとめていきます。
・内容をできるだけ理解しやすくするため
・特定の要素を強調し、読み手に注目してもらう
写真やボタンなどに余白を入れるほどそのコンテンツが強調される効果があります。
特にCTAボタンは周囲に余白を入れるとコンバージョン率が上がると言われています。
下の画像を見ていただくとわかるように余白があるとセクションごとのまとまりが強調され、
情報と情報の間隔が広がれば、別のコンテンツであるということが分かりやすくなります！
間隔の大きさは大体約60〜100pxくらいが多く、余白が多いサイトとなると120〜140pxほどの間隔で作られるサイトも見られます。
余白が多いサイトは化粧品やジュエリー、アクセサリーサイトなどが多く、シンプル・高級感・洗練されているというイメージを持ちます。
最近は情報量が多くても余白を意識したすっきりとしたサイトも多いので、流行りの傾向もあるかと思います。
DEAREST
余白が少ないサイトはWebマガジンのサイトや通販サイトに多く見られます。情報を多く入れられるので活気があるイメージを持ちます。
北欧、暮らしの道具店
本日はホームページをhtmlなどの知識がなくても管理できるようにするCMS
「WordPress」についてご紹介いたします。
コンテンツ管理システムと言われるもので、アメブロなどのようにページ制作のノウハウなどが無くても自分である程度の更新をできるようにするシステムのことを指します。
既存のブログサイトのような決まった形ではなく、自分の理想により近いブログを作れたり、
ホームページを丸々１つ作ることもできてしまいます。
通常ではホームページを変更する場合、ホームページを制作した会社に修正の依頼をするケースが多いですが、CMSを導入しておけば導入された箇所を自由に変更することができます。
ホームページを運用するにあたって更新する時CMSが入っていない場合はホームページ管理会社へ修正依頼を出し、見積もりをしてもらい修正。
というのがよくある流れかと思います。
その場合もちろん修正費用が発生しますし、すぐに更新したいのに！というもどかしさを抱くことになります。
そんなあなたがまさに対象です！
CMSを導入すると管理画面にログインするだけで誰でも簡単にホームページの修正ができてしまします。
通常のCMSを導入をするホームページと比べるとどうしても費用はかかってしまいます！
ただ、弊社ではお打ち合わせの段階でどこの修正は自分でしたいかなどしっかりお聞かせいただきます。
その際に一部のみCMS化することでお安くすることができるなどの提案も都度させていただいています。
ご新規の作成だけでなかホームページをリニューアルしたい！というご依頼も承っていますのでお気軽にお問い合わせください！
ビジネスのブランディングにおいて重要な要素であるロゴ。ここでは無料で簡単にロゴを作成することができるサービスを２つご紹介します。いずれもユーザー登録不要、商用利用OK、誰でもすぐ使えます。
ロゴのテキストを入力してフォントやカラー、アイコンを選択するだけで簡単にロゴを作成することができます。ダウンロードするサイズも選べて便利です。
LOGO MAKER
1.ロゴのテキストを入力します
2.フォント、文字の太さ、カラーを選択します。
3.お好みでアイコンを選択し好きな場所に配置します。アイコンのカラーやサイズは任意に設定できます。
画面右側のプレビュー画面でPCやスマホの表示、名詞や紙袋に印刷した際の表示を確認することができます。
4.完成させるボタンをクリックし、保存形式とサイズを選択して保存します。
ロゴのテキストを入力していくつかの質問に答えるだけで数十個のロゴを提案してくれます。
Hatchful
1.ビジネスの業界を選択する
2.デザインのスタイルを選択する
3.ビジネス名を追加する
4.ロゴをどこで使用するか選択する（複数選択可）
5.ロゴを選択する
「こだわり」や「熱い想い」「ビジョン」のこもったオリジナルのロゴをプロに制作して欲しい、というお客様にはエクスフィールドが時間が経っても⾊あせず、⻑期的にご使⽤いただけるロゴの提案をさせて頂きます。お気軽にお問い合わせください。ぜひロゴ制作のページもご覧ください。
本日は新人Webデザイナー向けにデザインの基礎知識をご紹介したいと思います。
デザインは「目的を達成するための手段」であるというように、ただおしゃれだったり綺麗なだけだと、残念ながら、集客を上げるなどの目的を達成することはできません。
今回紹介する基礎知識はデザイナーにとって当たり前に理解できているようで、新人の方は実践に移すと忘れがちになることが多いかと思うため、復習がてら読んでいただけると幸いです。
これから紹介する４原則はレイアウトの基本原則とも呼ばれ、デザイナーでない方でも情報を整理する際に役に立ちます。
①近接
要素と要素の間隔を「まとめる」ことで情報を読み取りやすくします。
関連する情報同士をグループ化することで直感的に情報の構成を理解できるようにします。
情報がグループ化されていれば読んでもらう可能性が高くなり、覚えてもらう可能性も高くなります。
グループ化する際に、関連するものとそうでないものの「余白」に差をつけることが近接のポイントとなります。
②整列
デザインの要素の位置や大きさ、色を「そろえる」ことで、バラバラに羅列された情報が一気に見やすくなります。整列は「中央揃え」「左揃え」「右揃え」に分けられますが、どのように見せたいか目的によって使い分けると良いでしょう。整列を使用すると透明の見えない線が生まれ、「左揃え」や「右揃え」にすると見えない線がより強く見えるようになります。
一般的に日本語は左から読むため、日本語の文章の可読性を上げたいなら「左揃え」にするのがベターだと言われています。
③反復
デザイン上のある特徴、フォントや色、配置など作品上で「くり返す」という法則です。
ある特徴というのはフォント、色、罫線、フォーマット、アイコンなど様々な要素です。
要素をくり返し使うことで「一貫性」が生まれ作品に統一感が生まれます。
統一感が生まれることで視線がコントロールされ、ユーザーの目がさらに惹きつけられます。
④コントラスト
コントラストは２つの要素が異なる場合に「メリハリをつける」ことで情報を差別化させることです。
上で紹介した「近接」や「整列」と違い、あえて差別化させることでユーザーの目を惹きつけてコントラストをつけます。
コントラストをつける際は、思いきりよくサイズや色を変えてわかりやすく差をつけることがポイントです。
RGBカラー
Webサイトはパソコンやスマホなどのディスプレイで閲覧されるので、RGBを使ってデザインします。光の三原色であるRGBは、「レッド」「グリーン」「ブルー」の3色で構成されており、色を混ぜ合わせるほど明るい色になり白に近づいていきます。
CMYKカラー
印刷物の色を表現する際は、CMYKを使います。
「シアン」「マゼンタ」「イエロー」「キープレート」（ブラック）で構成されており、RGBとは逆で混ぜ合わせるほど暗い色になります。
印刷物を入稿する際にRGBからCMYKに変換することがありますが、CMYKをRGBに変換すると通常のRGBに比べ、くすんだ色になってしまうので注意が必要です。
本日はレイアウトについてお話ししたいと思います。
人は誘導されているものに従って目線を無意識に動かしています。
デザイナーは制作前の構成を考えてデザインすることが大切です💡
まずは情報整理が必要です。
サイトを作成する際に
ロゴ・写真・タイトル・文章など様々な要素をつなぎ合わせていくと思いますがこの時に要素の中で優先順位を決めいていくことがとても大切です。
もちろん、サイトによって優先順位は異なるのでクライアントとの打ち合わせの際に何を一番ユーザーに目を止めて欲しいのかを理解しておくことが必要です。
情報整理の次に関係性を整理します。
例えば、キャッチコピーの下にロゴを配置すると、ユーザーにはしっかりと伝えることができません。
この場合、基本的にはコピーの下には説明文などが必要かと思われます。
優先順位と関係性を整理したら大まかな、まとまりが見えてくるはずです。
ノートに書き出すことで後に見返したり、頭の中で整理しやすくなります。
情報整理ができたら視線誘導を意識しながら
ワイヤーフレームを作成していきます。
こちらはインターネットで検索したらすぐにヒットするものも多いかと思われますが
・Zの法則
・Fの法則
・Nの法則
など人間の目線誘導を意識した情報が既に存在しております！
一度調べてみてください。
Zの法則で言うと
人間が左から右に流れる性質を利用しているレイアウト方法です。
知識として知っておくと頭でイメージしやすいので調べてみてください。
ホームページをデザインする際に要素ごとに余白が違っていると思います。
これは余白を生かして情報整理されているから見やすくなっているのです。
例えば、キャッチコピーの下にテキストを置きますが
この時にコピーとテキストがスクロールするほど離れていると
結びつきがないと感じてしまい、結果何が伝えたいの分からなくなってしまいます。
できるだけ要素同士は近くに
セクションが違えば余白は開けることを意識しましょう！
情報整理はデザインをする上でとても大切な作業です。
ここをおろそかにしてしまうとデザインの作成に時間を取られたり
ユーザーに離脱率がグッと下がってしまいます。
様々なサイトを見てどのように配置されているのかを見て、今後デザインを制作する際に
意識してみましょう！
こんにちは！エクスフィールドの新人Webデザイナーです！
本日はWEB制作をする上で、入れておくと作業の効率が圧倒的に良くなるGoogleChromeの拡張機能を３つご紹介いたします。
webページに表示されている画像やセクションや要素などの高さや幅、マージンなどをピクセル単位で測ることができます。
使い方は簡単です。Chromeの画面右上に表示されているPage Ruler Reduxのアイコンをクリックすると、マウスカーソルが大きな「＋」に変わり、画面上部に数値を表示するバーが表示されるます。マウスカーソルをブラウザの画面上で測定したい位置の視点で一度クリックし、そのまま測定位置の終点までドラッグしてください。
Webサイトデザインをする際、ヘッダーの色使いを真似したい、この要素の色は何色だろう？など、そんな時に便利な色取得ツール「ColorZilla」を紹介します。
使い方はChromeの画面右上にあるスポイトマークのアイコンから、「Pick Color From Page」をクリックします。
するとカーソルが出てくるのでページ上で取得したい色をクリックします。取得した色は自動的にクリップボードにコピーされます。
「CSS Pepper」はWebサイト内の要素をクリックするだけで、色や幅や高さ、padding、margin、font-familyなどを一発で調べられる拡張機能です。
Page Ruler Reduxと似ていますが、CSS Pepperの方が一発で様々な情報を取得できます。
使い方はChromeの画面右上にある「P」のマークをクリックします。すると、すぐにCSS Pepperがサイトを解析して、OGP画像（SNSでシェアされる時の画像）、タイトル、bodyに設定されているfont-familyをパネルで表示してくれます。
表示されているパネルの下にある「水玉」のアイコンをクリックすることで、表示されているページに使用されている全ての色のカラーコードが表示されます。
また、要素の余白やフォントを調べる際には、起動している状態で、特定の要素をクリックします。
するとパネルに、要素のサイズや余白、フォントサイズ、要素の文字色などクリックした要素の情報が表示されます。
本日は作業の効率を上げるショートカットキーをご紹介します。
WebデザイナーはデザインをするときにAdobe製品のフォトショップかイラストレーターを使用することが多いかと思います。
こちら、Adobe公式のサイトに掲載されいてフォトショップのショートカットキーリストです。
(引用元：Adobe公式サイト)
URL：https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html
こちらからダウンロードができるのでまだ覚えてない方はデスクにおいて覚えましょう！
こんなにもたくさんありますが・・・全てを覚えるよりも使用頻度の多いものを覚えておくことが大切です。
上記で紹介したものは初期設定のショートカットキーです
自分でもカスタマイズできるので変更したい方は設定してみましょう！
〈フォトショップカスタマイズ設定方法〉
❶編集 > キーボードショートカットとメニュー」を選択
❷設定ページが開くので変更したい箇所の動作を探して設定します
これでOK！
ぜひ試してみてください！
ショートカットキーを使用することでマウスで作業するよりも作業時間を短縮することができます。
作業時間を短縮することで他の作業ができたり、デザインを考える時間も増やすことができます！
もちろんデザインソフト以外にもエクセルや他の作業にも同じことが言えます。
この記事を活かしてぜひ効率よく作業してみてください！
サイトの表示速度はユーザーの離脱率に直結するため大変重要です。読み込みの遅いサイトを待ちきれず閉じてしまった経験のある方もいらっしゃるのではないでしょうか。
コンテンツが素晴らしいサイトでも重ければ見てもらえないということですね。
サイトの表示速度を上げるための手法はいくつもありますが、今回は画像の読み込みにフォーカスしてみたいと思います。
ほとんどのWebサイトで画像の占める割合は非常に大きいです。ページの読み込み時にすべての画像を読み込んでいては膨大な時間がかかってしまいます。画像の遅延読み込みとは、スクロールに応じて画像を必要なタイミングで読み込むといった対応です。
対応方法としては、以下の方法があります。
1.loading=”lazy”属性を付与する方法
Chrome、Edge、OperaおよびFirefoxでサポートされています。但し、現時点（2021年12月）ではloading=”lazy”は Safari は未対応、Firefoxはimageのみ対応です。(loading=“lazy”属性をサポートしていないブラウザに記述した場合、無視されるだけで特に悪影響はありません。)
最初に表示されるファーストビューにある画像に対しては設定しないようにします。スクロールしなければ見えない範囲に配置されている画像にのみloading=”lazy”を記述するようにします。
2.JavaScriptで制御する方法
loading属性がサポートされていないブラウザではlazysizesという遅延読み込みのライブラリを使って遅延読み込みを行うことができます。Browser-level image lazy-loading for the web で紹介されています。
画像を圧縮して容量を減らすことで表示速度を上げることができます。
知らないうちに容量の大きな写真をアップロードしてしまうこともあるので、なるべく画像はそのまま使うのではなく、圧縮して使うようにしましょう。ここではWordPressのプラグインと無料ツールをご紹介します。
1.WordPressのプラグインEWWW Image Optimizerを使う
画像をスキャンして最適化していない画像をピックアップし一括で圧縮することができます。
導入してアップロードしたタイミングで自動的に圧縮してくれるので導入しておくと良いでしょう。
2.無料の画像圧縮ツールTinyPNGを使う
手作業になるので少々手間はかかりますが、EWWW Image Optimizerより圧縮率が高く無料で使えるツールです。
画像をドラッグ＆ドロップするだけなので簡単に使えます。
表示の遅いサイトはユーザーに読んでもらえる可能性が低くなってしまうため、表示速度の改善はGoogleのSEOの側面からも重要な対応となってきます。
今回ご紹介した以外にも色々な方法がありますが、まずはすぐにできるところから取り組んできましょう。
ホームページやポスター、LINEスタンプ等々何かを作りたいけどなかなか作れずに困っている皆様。
エクスフィールドに相談してみませんか？ご相談は無料ですので、いつでもお伺いいたします。
TEL:052 - 938 - 4891
受付時間：10:00～18:00（平日）