最初のWordPressサイトを構築するための最良のヒントとツール

今日は告白します。私はあまり優れたWebデザイナーではありません。 私は正式なトレーニングを受けたことがありません–私は完全に独学です。 私の技術は執筆中であり、フリーランスのライターであり、適切なウェブサイトの予算がないために必要な要素としてウェブデザインを取り上げました。 私は1日目から、嫌いで時間の経過とともに調整できなかった低予算のWebサイトにお金を払うよりも、好きな（ただし、いくつかの「間違い」の可能性がある）まともなDIYWebサイトを用意したいと思いました。 結局のところ、私たちは皆、低予算のサービスプロバイダーがいかにあり得るかを知っています。

このようにして、アマチュアDIYWebデザインへの参入が始まりました。 すぐに、DIYのウェブサイトプロセスが私のウェブデザインへの興味を刺激しました。 私はまだ「真のデザイナー」ではありませんが、ワークフローを最大化し、好きなテーマを回避し、必要な特定の調整を実装するための基本事項を十分に理解しています。

これが取引です：私はプロのウェブデザイナーではありません（そしておそらく決してそうなることはありません）。 そして、私のようなDIYの人々、つまりほとんどのことを理解するのに十分賢く、時間を割いてくれる人のためのリソースを見つけるのは難しいかもしれませんが、実際の技術的背景はありません。

これらは、私が途中で手にしたDIYWebデザイナーにとって最高のツールとリソースの一部です。 あなたが同じように傾いているなら、これはあなたのためです！

ウェブサイトビルダーとカスタマイズ可能なテーマ

私は個人的にウェブサイトビルダーの大ファンではありません。WordPressが大好きで、ほとんどのウェブサイトビルダーが提供するよりもはるかに多くのコントロールを持っているのが好きです。 ドラッグアンドドロップで必要なサイトを正確に取得するというアイデアが気に入った場合は、WordPressのDiviテーマをご覧ください。 WordPress用にカスタマイズ可能なテーマも多数あります。

WordPressの子テーマを作成する方法

通常、完璧なテーマを見つけることはほぼ不可能です。 実行する必要のあるいくつかの変更が常にあります。 だから、TwentyFifteenのような素敵なWordPressのデフォルトテーマを使ってみませんか...

すべてのデザイナーにはお気に入りのテーマがあります。このDIY（非）デザイナーのお気に入りはGeneratePressです。 それは私が想像するほとんどすべてを行うことができ、アドオンは100％価値があり、手頃な価格です。ビデオチュートリアルは私の質問の98％に答え、開発者（Tom）はサポートフォーラムで非常に活発で敏感です。 私はこのテーマを2年間使用してきましたが、これ以上満足することはできませんでした。

見た目の世話をする

最近では、モバイルフレンドリーでレスポンシブなデザインが絶対に必要だということを私も知っています。 携帯電話や応答性のないウェブサイトにアクセスしましたが、見栄えがよくありません。 最近では、ほとんどのテーマに応答性の高い要素があります。あなたのテーマにも応答性のある要素があることを確認してください。 次に、構築プロセス中に、Duo、Screenify、Browser Shotsなどのツールを使用して、サイトのデザインがどのデバイスでも見栄えがすることを確認します。

スタイルガイドを使ったことがありますか？ これは、デザインのすべての視覚要素（フォント、スタイル、見出しの書式設定、Webサイトの色）のリファレンスシートです。 Webサイトを構築および調整するときに、参照しておくと非常に便利です。また、StylifyMeを使用して独自のWebサイトを生成できます。

これは、DIYデザインのキャリアのこの時点では計り知れないように思えるかもしれませんが、CSSにいくつかの変更を加えて、特定の要素の外観を微調整したい日が来るでしょう。 時が来たら、チュートリアルに夢中になったり、テーマからのサポートを探したり、CSSジェネレーターを使用して必要なコードを考え出すことができます。 また、ページに表示したいものを作成してCSSコードを生成できるドラッグアンドドロップエディタであるWebflowを確認することもできます。 ただし、これは有料サービスであり、DIYに逆行する傾向があります。

これは小さなジャガイモですが、サイトにファビコンがあることを確認してください。 このファビコンジェネレーターを使用するか、WordPressサイト用のシンプルなファビコンプラグインを入手して、プロセスを非常に簡単にすることができます。 （私の専門家ではない意見では、プラグインルートの方がはるかに好きです。）

みんなのお気に入り：フォント

フォントはウェブデザインの黄金の子です。 誰もが書体を愛しているようです。 しかし、自分が何をしているのかわからない場合、フォントは一種の威圧的である可能性があります。 フォントの購入、インストール、変更も…そうです。 サイトの見栄えを良くしたいだけの場合は、Google Fontsをインストールして、Web対応の書体の非常に堅牢なデータベースを利用できます。 また、簡単なWeb検索と組み合わせて見栄えのするGoogleFontの組み合わせを簡単に見つけることができます。

Type-Finderは、一連の短い質問をしてから、フォントの提案を提供するサイトです。 あなたが好きなものを選んで選んでください、そしてあなたはあなたの道を順調に進んでいます。 特にフォントやフォント理論に精通していない場合は、フォントの選択が簡単になります。

勇気があり、ヘッダーやピンなどに必要なフォントを正確に取得する準備ができたら、Glyphrをチェックしてください。 これはフォントエディタで、とてもかっこいいです。

ワークフローツール

ズボンの前を飛んでいるDIYデザイナーの場合、ワークフローについて考えることはめったにありません。 しかし、私は（難しい方法で）いくつかの優れたデザインワークフロー要素によって、DIYWebデザインの頭痛の種を大幅に減らすことができることを学びました。

すべての設計者がツールキットに含める必要のある13のブラウザベースのツール

ああ、ブラウザベースのアプリ。 それはそれ自体を更新する堅実なソフトウェアです。 あなたは物事をダウンロードすることを台無しにする必要はありません。 そして、おそらく最も素晴らしいのは、選択したアプリにどのサイトからでもアクセスできることです...

「本物のウェブデザイナー」から最初に採用したいのは、ワイヤーフレームの概念です。 ワイヤーフレームは、紙に各ページをスケッチするのと同じくらい単純な場合もあれば、AdobePhotoshopのグリッドのように複雑な場合もあります。 私の目的では、通常、紙のスケッチで十分です（結局、私のデザインで超技術的になることはありません）が、デジタルグリッドでより正式に物事を見たい場合は、Mockflow（有料サービス）をチェックしてください。 Moqups。

私が行き詰まるもう1つの場所は、コピーを作成する前に、単語がどこに行き、どのように見えるかです。 このためには、ダミーのテキストジェネレータが最適です。 あなたが構築しているときにあなたのサイトにコピーを持っていると、それは言葉が実際に何であるか（これは私の個人的な失敗です）にとらわれることなく簡単に評価することができます。

線や単語で遊ぶのをやめて、色で遊ぶときは、いくつかの楽しいオプションがあります。 カラーピッカーは私のお気に入りのいくつかです-私は色を選び、次にカラーピッカーはいくつかの素晴らしい色の組み合わせを吐き出します。 AdobeとColorWizardは、2つの楽しいオプションです。

あなたのカラーピッカーがあなたのためにそれをカットしていないなら、あなたはPictaculousのようなものを使うことができます。 気に入った画像をアップロードすると、その画像から描かれたカラーテーマが吐き出されます。 すごいかっこいい！

それがすべてではありません

DIYデザイナーに最適なデザインツールに終わりはありませんが、これらは初心者デザイナーの生活をはるかに楽にするものだと私は見つけました。 あなたが持っていたいツールは何ですか？

無料の電子ブック：Webデザイナーのための25の必須ツール

デザイナーのツールキットは彼らの成功の鍵となる可能性がありますが、ワークフローに含めるツールをどのようにして知ることができますか？ これらの25のツールは、成功するWebデザイナーにとってなくてはならないものだと思います。