11デザインの間違いWordPressテーマの購入者は通常
公開: 2017-07-26WordPressテーマでウェブサイトを作成していることに気付いたことがありますが、最終的な結果はテーマのデモのようには見えませんでしたか？ ウェブサイトメーカーが見落としがちな11の一般的なデザインミスをリストアップしました。
あなたは完璧なWordPressテーマを見つけました。 テーマのデモは完璧に見えました。 あなたのクライアントはそれをとても気に入り、あなたが購入することに同意しました。 あなたはそれを購入し、インストールし、クライアントのニーズに合わせてテーマの編集を開始しました。
ロゴを変更し、テーマの色を変更し、スライダーの画像とコンテンツを挿入しましたが、最終的に、作成したWebサイトはデモのようには見えません。 あなたは何かが間違っていることを知っていますが、あなたはただ何を検出することができません。 おなじみですか？
過去5年間、WordPressテーマビジネスのデザイナーとして働いていた私は、WordPressテーマで作成された美しいWebサイトの例を無数に見ました。
しかし、たまに、しっかりとした基盤を持っているが、いくつかの小さなデザインミスがあるWebサイトを目にすることがあり、それが全体的なエクスペリエンスを台無しにしてしまいます。 私は誰でも簡単に修正できる小さなことについて話している。
特にあなたがデザイナーでない場合、これらの欠陥を見つけるのは難しいことを私は知っています。 そのため、クライアントのWebサイトをさらに見栄えよくする方法についてブログに投稿することにしました。
このブログ投稿をブックマークして、次にWordPressテーマでWebサイトを構築するときに、以下のリストを確認してください。 すべての欠陥を取り除くのに1、2時間しかかかりませんが、結果は100％良く見えます。
1.スライダーのテキストのコントラストが悪い
スライダー画像についてはすべきこととすべきでないことについて話してきましたので、ここで簡単に説明します。 原則は単純です：
- スライダーのテキストの色が白の場合は、暗い背景を選択してください。 スライダーのテキストが暗い場合は、明るい背景を選択します。
- テキストが表示される領域に、背景の視覚的なノイズが多すぎないことを確認してください。 背景が乱雑になると、前面のテキストが読みにくくなり、スライダーに書かれた主要な価値提案が見落とされる可能性があります。
幸いなことに、私たちのテーマの大部分には、テキストの後ろに半透明の無地の背景のオプションが含まれています。 新しいWordPressテーマでは、スライダー上のすべてのテキストに影が適用されるため、コントラストがさらに向上します。
2.スライダー画像が大きすぎる
WordPressのテーマで作成されたWebサイトを見ると、ユーザーが大きすぎるスライダー画像を使用していることに気付くことがよくあります。 画面の高さの100％を占めるスライダー画像を持つことは、写真家であり、写真が最終製品である場合にのみ許容されます。 それ以外の場合は、安全を確保し、テーマの推奨事項に固執してください。 それはあなたのウェブサイトの完璧な視覚的バランスを維持します。 
3.貧弱な白（ネガティブ）スペース
Webデザインの空白またはネガティブスペースは、ウィジェット、テキストブロック、画像、またはWebサイトの他の部分の間の空白スペースであり、すべてを整理して、エンドユーザーに明確で論理的なフローを提供するのに役立ちます。
どんなに一生懸命やっても、WordPressテーマのあらゆる側面を防弾する方法は、ユーザーは常に空白を破壊する方法を見つけます。
幸いなことに、テーマには強力なページビルダーを使用しています。つまり、Webサイト全体の間隔を簡単に調整できます。 ページビルダーを使用すると、ウィジェットのパディング、行のパディングを変更したり、列間のガターサイズを変更したりできます。
詳細については説明しませんが、実際的な例をいくつか紹介します。
- ほとんどの場合、Webサイトの作成者は使用する空白が少なすぎるため、コンテンツが呼吸できません。したがって、通常、適用する空白が多いほど、より良い結果が得られます。
- 要素間の関係を間隔を空けて表示します。 ブログ投稿のタイトルや投稿の日付など、一緒に使用される要素は、ブログ投稿の日付やページのヘッダーなど、目的が異なる要素よりも近くに配置する必要があります。
- 間隔と一致している。 つまり、Webサイトのすべての行には、上下左右に同じ量の空白が必要です。
だから、それはウィジェットになります。 ページのどこに表示されていても、同じ量のパディングとマージンを適用する必要があります。 一貫性はあなたのウェブサイトにバランスをもたらし、重要なこと、つまりコンテンツに焦点を合わせます。
4.悪いモバイルフレンドリー
手順とルールは上のデスクトップと同じです。 それでも空白に注意を払う必要がありますが、モバイルの場合、いくつかの追加のルールがあります。
- そのうちの1つは指に優しいデザインです。 指はモバイルでブラウジングしながらウェブサイトを移動するためのツールであるため、ページを指に合わせる必要があります。 WordPressテーマをデザインするときは、ボタンとクリック可能な要素が50px以上であることを確認します。 WordPressテーマにサードパーティの要素を追加する場合は、それらが十分に大きいことを確認してください。 また、ミスクリックを防ぐために、これらの実用的なコンポーネントがくっつきすぎないようにしてください。
- 速度のために画像を最適化します。 多くの人が外出先でWebサイトにアクセスします。これは、信頼性が低く、場合によっては接続が不十分であることを意味します。 （モバイルでの）遅いサイトの読み込みを排除し、画像を最適化してください。
- 実際のモバイルデバイスでWebサイトをテストします。 ブラウザウィンドウのサイズを変更してモバイルビューを表示できますが、すべての調整が完了したら、実際のモバイルデバイスでWebサイトがどのように表示されるかを確認してください。
オペレーティングシステム、ブラウザ、および全体的なユーザーエクスペリエンスは、デスクトップとモバイルで異なり、いくつかの不平等が生じる可能性があります。
Googleは、モバイルフレンドリーテストを開発しました。これは、ウェブサイトがモバイルフレンドリーかどうかを確認するためのツールです。
私たちは、WordPressテーマのすべてが簡単にそれを通過することを確認します。
5.手をつないで行かない色を使用する。
適切な色の組み合わせを選択するのは難しいことです。 あなたが才能があるなら、あなたはあなたの腸の感覚に従うことができます。 それ以外の場合は、そのために特別に作成されたツールを使用してください。
例を示します。
WordPressのテーマのほとんどは、一次色と二次色で作られています。 ロゴがシェルのように見える場合、一次色と二次色を選択する決定は簡単です。 召喚状の原色として赤が使用されます。 黄色は二次色で、背景やサポート要素に使用されます。
ロゴがスターバックスのロゴのように見え、1つの色のみで作成されている場合は、2番目の色を見つける必要があります。
1つのオプションは、一次色と二次色に同じ緑色を選択することですが、私はそれを強くお勧めしません。
あなたがデザイナーの内臓を持っておらず、カラーコンボを選ぶのが難しい場合は、Coolorsと呼ばれる解決策があります。 美しい色の組み合わせを作成するための使いやすいツールです。
彼らのアプリに移動し、列の下部に原色の16進カラーコード（私の場合は＃006241）を挿入します。 次に、ロックアイコンをクリックしてスペースバーを押し、ロックします。
ヒント：ロゴの16進コードを取得する方法がわかりませんか？ そのための便利なChrome拡張機能があるかどうかを確認してください。
私の結果は次のようになります。
ご覧のとおり、すべての色が変更されましたが、原色は同じままです。 希望の色が得られなかった場合は、スペースバーを押し続けます。
二次色を選択する唯一の理由がWebサイトで使用することであり、その色が他の場所に表示されない場合は、強すぎる色を選択しないでください。 私たちの場合、明るいオレンジ色が出ています。
ブランドを損なうことなく、メインの色（この場合は緑）をスムーズにサポートする、より繊細な色を選択する必要があります。
私の個人的な選択は、セカンドベージュ（＃d8c99b）です。これは、グリーンで完全に機能し、間違いなくそれを追い越さないためです。
たぶん、この特定のベージュ色は完璧な色ではありませんが、それは十分な選択肢です。 これが理由です。 色を選ぶときは、暗いテキストや白いテキストがどのように見えるかを考えてみてください。
私の例では、暗いテキストは問題なく表示されますが、コントラストを少し追加し、少し明るいベージュ色を選択すると、さらに良くなります。
幸いなことに、Coolorsアプリにはもう1つの優れた機能があります。 あなたはすべての色の異なる色合いを選択することができます。 色付きの列にマウスを合わせ、「代替シェード」と呼ばれる最初のアイコンをクリックします。 次に、明るい色または暗い色を選択し、常にコントラストを念頭に置いてください。
これらの2つの色がどのように連携するかについて簡単なデモを行いました。 この目的のために、私はAdrenaline WordPressテーマを採用し、それをスターバックスのWebサイトに変換しました。
アドレナリンワードプレスのテーマを文字通り2分で完全に別のものに変更したことに感銘を受けました。 私がしなければならなかったのは、2つの色を変更し、カスタムヒーロー画像をアップロードし、カスタムロゴをアップロードすることだけでした。 自分で試してみてください。
6.Webサイトのナビゲーションを乱雑にしないでください
読みやすく、消化しやすい方法でWebサイトのナビゲーションを構成します。 重要度の低いものをドロップダウンにグループ化するか、トップバーまたはフッターに含めます。 ナビゲーション階層を論理的にし、メニューのすべての同じレベルが同じ優先順位を持つようにします。
たとえば、条件と合意は通常、主要な召喚状よりも重要ではないため、両方を同じレベルで表示することはできません。 規約をフッターに入れ、主要な召喚状をヘッダーに入れます。
最大5つまたは6つのオプションを使用して、メインナビゲーションをクリーンに保ちます。
7.ロゴが大きすぎます
有名な文章があります。私たちは皆、ある時点でクライアントから「ロゴを大きくする」という文を受け取ります。 ウェブサイトメーカーとしてのあなたの仕事は、ウェブサイトの訪問者があなたのロゴがどれほど美しいかを見るためにあなたのウェブサイトに来ないので、400ピクセル幅のロゴを持つ必要がないことをクライアントに教育することです。
WordPressテーマの作者が推奨するサイズのロゴをアップロードします。 彼らはおそらく、どのロゴサイズが特定のテーマに最適であるかを最もよく知っています。
ロゴはウェブサイト上の多くのものの1つに過ぎず、他のコンテンツと調和して再生する必要があります。
私を信じていない場合は、ワールドワイドウェブ上の主要なブランドを見てください。それらの98％にロゴがあり、すべてのコンテンツをサポートするのに十分な大きさです。 ユーザーは、どのブランドがWebサイトの背後にあるかを知る必要がありますが、サービス、オファー、および主な行動の呼びかけにも焦点を当てる必要があります。
8.ロゴの品質が悪い
ある時、Microsoft Word（.doc）形式のロゴを入手したことがありました。 私が言いたいのは、クライアントは常にあなたを驚かせる方法を見つけるだろうということです。
ロゴに関しては、可能な限り最高のピクセルパーフェクトな状態にすることが重要です。 そのためには、ベクター形式（.pdf、.ai、.svg、.eps）が必要になります。 次に、お気に入りのベクターアプリケーション（Adobe Illustratorなど）に移動し、そのロゴをテーマメーカーが推奨するサイズにエクスポートする必要があります。 それはあなたが最も鮮明なロゴを取得するための最良の可能性です。
ロゴを.pngで取得すると、うまく機能する可能性がありますが、サイズ変更時にシャープネスが失われる可能性があります。 サイズを変更するとロゴが台無しになる場合は、fiverr.comにアクセスし、5ドルを投資してベクター形式に再描画します。 大きな結果を得るためのもう1つの小さな投資。
9.画質が悪い
状況は年々良くなっていますが、高品質の写真に十分な注意やリソースを注いでいない企業がまだあります。
特定の製品を販売するWebサイトがある場合、潜在的な顧客が製品を購入するかどうかを決定するときに、高品質の画像が見込み客におそらく最大の影響を与え、重要な役割を果たします。
クライアントが高品質の写真を提供しなかった場合、またはクライアントが写真を持っていない場合は、100ドルを投資してオンラインで購入するようにクライアントを説得するのがあなたの仕事です。
高品質の写真の優れた情報源はShutterstockで、月額99ドルで50枚の画像を入手できます。 小さなウェブサイトには十分であり、ウェブサイトのユーザーとクライアントのブランドに対する全体的な信頼に多大な影響を与えます。
ヒント：写真を選択するときは、一般的で洗練された非現実的な写真を避けるようにしてください。 その一例は、超白い歯と完璧な肌を持つ白人の男です。
逆効果になることもありますが、訪問者に影響を与えることはほとんどありません。 ある程度の本物の画像を見つけてください。 シンプルにするために、リアルなルックアンドフィールの画像を使用してください。
10.サードパーティのプラグインをスタイリングしない
新しいWordPressテーマを作成する過程で、私たちは常にテーマを作成しているニッチの調査を行います。 私たちは常にテーマに必要なすべての機能を含めることを熱望していますが、クライアントが何か他のものを望んでいる場合もあります。 それがWordPressプラグインが登場する時です。
それは何も悪いことではありません。 プラグインをインストールしてWordPressテーマに組み込んだら、フロントエンドでプラグインがどのように表示されるかを確認してください。
お客様がボタン、フォーム、色を他のテーマと同じスタイルでスタイリングするのを忘れていることによく気づきます。
すでに作成されたCSSクラスをサードパーティプラグインに適用するのにかかる時間はわずか10分ですが、最終的には大きな影響があります。
あなたがそれをするための知識を持っていないならば、私たちはあなたのためにそれをすることができます。
11.読みやすさが悪い
タイポグラフィはウェブデザインの95％であるという有名な主張がありますが、それは正しいことです。
テーマのデモと同じようにウィジェットを使用すれば、読みやすさを重視しているので問題ありませんが、フォントのレイアウトやスタイルを変更する場合は、以下のルールに必ず従ってください。
- すべての行には、スペースを含めて60〜80文字にする必要があります。
- カスタム行の高さを設定する場合は、フォントサイズに1.4から1.6を掛けます。 フォントサイズが16pxの場合、行の高さは22.4〜25.6にする必要があります。
- テキストの周りに十分なスペースを残します。
- 薄すぎるテキストの色は使用しないでください。 ＃777777より明るいものはすべて、読みやすさに悪影響を及ぼします。
- 推奨よりも小さいフォントを使用しないでください。 最低でも14pxですが、16pxまたは18pxを選択することをお勧めします。
- テーマにカスタムフォントをインストールする場合は注意が必要です。 一部のフォントは見出し専用に作成されており、小さいサイズではうまく機能しません。 一部のフォントは印刷用に作成されており、画面上でうまく機能しません。また、一部のフォントは作成が不十分です。 デフォルトのWordPressテーマのフォントを別のものに置き換えたい場合は、よく考えてください。 それでも変更したい場合は、安全側に固執して人気のあるものを選んでください。
- 正しい配置を使用してください。 ケースの95％で、左のテキストの配置が進むべき道です。 他の5％では、中央揃えを使用できますが、短いサポートテキストにのみ使用するようにしてください。
右揃え（右から左への言語を除く）と両端揃えは問題外です。 限目。
結論：
次回クライアント用のWebサイトを作成するときは、上記のリストを確認して、これらの小さな欠陥をすべて修正してみてください。 所要時間はわずか1〜2時間ですが、最終的にははるかに優れた結果が得られます。つまり、より幸せなクライアントとより優れたリファレンスを意味します。 それに加えて、素晴らしいライブの例を披露するので、あなたは私たちに好意を持ってくれるでしょう。
ご不明な点がございましたら、以下にコメントしてください。
編集：この記事はオランダ語に翻訳されています–あなたの言語に翻訳したい場合は、下のコメントで知らせてください。