だから、あなたはついにウェブサイトを立ち上げて、あなたのプロのスキルやあなたのsideただしさを自慢する時だと決めました。 準備として、完璧なドメインを取得し、Webサイト構築サービスにサインアップし、適切なテンプレートを選択し、受賞歴のあるコピーを作成してそこに投げ込みました。 そして今、あなたはあなたの大きくて美しい 空の ウェブサイトを見つめています。 ブランクを重視。
最近では非常に多くのオンラインプラットフォームがWebサイトの構築を非常に簡単にしていますが、空のページをじっと見つめることで頭が回転する可能性があります。 結局のところ、どの写真を含めるか、どのようにページをレイアウトするかなど、いくつかのことを把握する必要があります。Webデザインの知識があまりない場合、このプロセスは非常に恐ろしく思えます。
あなたがこれを持っていることを伝えるためにここにいます。 美しいウェブサイトを簡単にまとめるために、サイトを立ち上げて実行するために必要なすべての要素、およびそれらを作成するための私たちのお気に入りのプログラムとプロのヒントを順を追って説明する究極のツールキットを考案しました驚くばかり。
1.画像
![](http://i.go-travels.com/img/advice/839/here-s-how-design-brag-worthy-website.jpg width=780 />
<p>「写真は千の言葉に値する」という言葉を聞いたことがあるでしょう。デジタルコンテンツに関しては、これは特に当てはまります。 人目を引く画像で伝えることができれば増えるほど、言いたいことや売ろうとしていることを説明するために使用するテキストが少なくなります。</p>
<center>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1427824399252755" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-1427824399252755" data-ad-slot="3871104749"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>
</center><p>自分自身と自分の仕事について考えることから始めます。 使用できるプロの写真はありますか？ そうでない場合は、友人を見つけて自分の手で試してみるか、プロを雇うことを検討してください。 過去に行った仕事の写真やスクリーンショットはありますか？ それらを収集します。 あなたが愛し、あなたの仕事や個性を表すInstagramで共有した写真はどうですか？ お気に入りをいくつか選んでください。</p>
<p>フィラーが必要な場合は、ストック画像が最適です。 UnsplashとStockSnap.ioは、アトリビューションフリーのお気に入りのオプションの一部です（つまり、心ゆくまで無料で使用できることを意味します）。 探しているものが見つからない場合は、1つか2つの完璧な写真の支払いを検討してください。 ゲッティイメージズなどの大規模なストックイメージサイト（サイトを通じて購入するユーザーに10ドルの画像を提供するSquarespaceと統合されている）から、ストックジーやTwenty20などの通常10〜25ドル程度の小規模オペレーションまで、多数のオプションがあります。画像ごと。</p>
<center>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1427824399252755" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1427824399252755" data-ad-slot="4175470618" data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>
</center><p>これらの写真を選択するときは、自分の性格や毎日の過ごし方を反映した画像を考えてください。 あなたは、私たちのほとんどのように、一日中机に座っていますか？ あなたの個性に合った机の写真を探してください。 あなたの主な仕事は人々に関係していますか？ コラボレーションしているグループを示すショットを探します。 旅行への情熱について話していますか？ お気に入りの目的地の素晴らしい写真を探してください。 それがあなたの仕事にとって意味があるなら、あなたはあなたの背景画像としてビデオを使うことを決めることさえできました！</p>
<center>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1427824399252755" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-1427824399252755" data-ad-slot="3871104749"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>
</center><p>ある時点で、すでに持っている、またはオンラインで見つけた画像を編集したい場合があります。 シンプルな画像エディターで、トリミング、ライトニング、タッチアップ、さらにはテキストやグラフィックスの追加も可能です。 一部のWebサイトデザインサービス（Squarespaceを含む）には、プラットフォームの一部として利用可能な画像エディターがあります。 そうでなければ、無料または安価なオプションがオンラインでたくさんあります。 PicMonkeyには、使いやすい歯のホワイトニングからヘッドショットのメイクアップエフェクト、写真フィルター、フレームなどまで、5ドル/月でフルセットの機能が用意されています。</p>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1427824399252755" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1427824399252755" data-ad-slot="5787935184"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script><p><strong>さらに読む：</strong> 50枚の無料写真を使用して、ソーシャルプロフィールをさらに魅力的にすることができます</p>
<a id="menu-2"></a><h2>2.カラーパレット</h2>
<p align=)
![](http://i.go-travels.com/img/advice/839/here-s-how-design-brag-worthy-website-2.jpg width=780 />
<p>多くのWebサイトテンプレートには事前に設定されたカラースキームが付属しているため、提供されているものが気に入った場合は、このセクションをスキップしてください。 しかし、色はあなたのサイトに少し個性を加える簡単な方法なので、色を変えることを選ぶかもしれません。</p>
<center>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1427824399252755" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-1427824399252755" data-ad-slot="3871104749"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>
</center><p>明るさのある白黒を好む場合でも、サイト上で色合いを少しずつ変えたい場合でも、coolors.coは、一緒に機能する色を識別するための優れたリソースです。 使い方はとても簡単です。サイトにアクセスしてスペースバーを押すだけで、好きな色合いに出会えます。 好きな色の写真をアップロードして、スウォッチを直接取得することもできます。 サイトに多数の画像を含める場合、これは配色が全体的に機能することを確認するための優れた戦略です。 一緒にうまく機能し、あなたを表す色を見つけるための別の驚くべき場所は？ クローゼット！ お気に入りの糸をいくつか引き出して、色の選択肢をそれらに合わせます。</p>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1427824399252755" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1427824399252755" data-ad-slot="5787935184"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script><p>視覚的に圧倒されないようにするために、1〜2のアクセントカラーを使用した、ほとんどニュートラルなパレットを選択することをお勧めします。 使いやすいように、グレーのシェードにお気に入りの色とその補色（たとえば、ライトグレー、ミディアムグレー、ダークグレー、オレンジ、ブルー）を加えてみてください。 完成したら、パレット全体をエクスポートするか、好きなスウォッチのカラーコードをコピーして、サイトコードまたは組み込みスタイルエディターに直接貼り付けます。</p>
<p>参考資料：デザイナー向けの色理論：独自のカラーパレットの作成</p>
<a id="menu-3"></a><h2>3.フォント</h2>
<p align=)
![](http://i.go-travels.com/img/advice/839/here-s-how-design-brag-worthy-website-3.jpg width=780 />
<p>書体は、スタイリッシュで読みやすいWebサイトの場合、大きな違いを生むことができます。 本質的には単純に見えますが、レタリングでできることはたくさんあり、書かれたコンテンツのルックアンドフィールを新しいレベルに引き上げることができます。</p>
<p>繰り返しになりますが、多くのWebサイトテンプレートには事前に設定されたフォントが付属していますが、フォントペアを変更したい場合は、フォントを見つけるための簡単なソリューションがあります。 厳選されたデザイナーデュオをスクロールして、適切なペアを特定します（そして、サイト全体で1つまたは2つのフォントだけに固執して、物事が乱雑にならないようにします）。</p>
<p>ここで警告の言葉-何か面白いものや違うものを選びたくなるかもしれませんが、履歴書でフォントを選択するときと同じ原則に従い、すべてがプロフェッショナルで読みやすいものであることを確認してください。 筆記体または一意のフォントを本当に含めたい場合は、グラフィック要素として1か所（ヘッダーなど）に配置し、残りのテキストをより基本的なものにしてください。</p>
<p><strong>さらに読む：</strong>履歴書（または個人用サイト）で使用する20種類のベストフォントとワーストフォント</p>
<a id="menu-4"></a><h2>4.ページレイアウト</h2>
<p align=)
![](http://i.go-travels.com/img/advice/839/here-s-how-design-brag-worthy-website-4.jpg width=780 />
<p>これですべてが選択されましたが、ページのどこにすべて配置しましたか？ Webデザインに慣れていない場合、多くのコンテンツを整理し、意図的に見せることは難しい場合がありますが、すぐに速度を上げる方法はたくさんあります。</p>
<p>Squarespaceでサイトを構築している場合は、会社のスターターレイアウトに感謝します。これは、Aboutページから連絡先ページまでのすべてに最適化されたテンプレートを提供します。 そこから、コンテンツを直接プラグインしたり、ニーズに合わせて要素ブロックを移動したりできます。</p>
<p>レイアウトのインスピレーションを得るもう1つの素晴らしい場所は、他の人のサイトです！ 模倣はお世辞の最良の形態ですので、サイトをうまく整理していると思う人を見つけて、あなたがそれらについて好きな要素をまねるようにしてください。 または、「ウェブサイトのデザイン」や「ウェブサイトのレイアウト」などの用語を検索して、自分で複製できる例を収集します。</p>
<p><strong>さらに読む：</strong>これまでに見た35のベストパーソナルウェブサイト</p>
<a id="menu-5"></a><h2>5.ロゴ</h2>
<p align=)