1.サーバー・ドメインを契約する（レンタルサーバーor自社サーバー）
2.契約ドメインをサーバーに設定
3.独自SSL（http→https）を設定
4.WordPressをインストールする
5.デザインテーマ設定
6.必要なプラグインをインストールし、デザインやコンテンツ発信をしていく
7.Google Analyticsを設定し、データをウォッチしながらサイト改善を繰り返す
以上がWordPress構築・運用時の基本的なフローです。
WordPressのおすすめプラグイン
Classic Editor
Wordprss5.0になってエディターが大きく変わってしまいました。以前のものが使いやすいというユーザーが多く、切り替えるためのプラグインが登場しました。Wordpressチームによって管理されている公式プラグインとなっています。
Contact Form 7
お問い合わせフォームを簡単に作成できるプラグインです。日本人が開発したプラグインのため使い勝手が良くなっています。シンプル設計で直感的に使用することができます。お名前、メールアドレス、題名、メッセージ本文だけならインストール後すぐに利用できます。カスタマイズもタブをクリックして挿入するだけです。URL、電話番号、ドロップダウンメニュー、ラジオボタン、ファイルなど必要に応じて追加することが可能です。
Yoast Duplicate Post
ブログの投稿や固定ページなどのコンテンツを複製するプラグイン（拡張機能）です。
Photoshopカンバスサイズを変更
1.［切り抜きツール］を選びます。
2.カンバスの角がドラッグできる状態になります。
3.後はドラッグでカンバスサイズを変更することができます。
4.enterで確定
キーボードのEnterでサイズ変更を確定します簡単にカンバスサイズが縮小できます。
微調整も簡単です。指定したいカンバスサイズの数字が厳密に決まっていない限り、この方法が便利。
Webサイトの作成方法
Webサイトには以下の４つの作成方法があります。
1.ブログサービスを利用する
ブログサービスとは、ブログを作成・管理する機能を提供しているサービスです。
代表的なサービスとしては、Amebaやライブドアブログが挙げられます。
ブログサービスは、ブログの機能に特化することでシンプルで簡単に利用できるのが特徴です。
ユーザ登録後、あらかじめ用意されたWebサイトのテンプレートから好みのデザインを選択します。
メリット:簡単にWebサイトが作れる
デメリット:ブログサービスは自由度がなく、カスタマイズができない
2.Webサイト作成サービスを利用する
Webサイト作成サービスは、Webサイトを作成・管理する機能を提供しているサービスです。
代表的なサービスとしては、Jimdo・Wix・FC2ホームページなどがあります。
Webサイト作成サービスであれば、ブログでは対応できないページの追加や構成の変更にも対応できるため、簡単なコーポレートサイトやショップサイトなどに利用可能です。
一部のサービスでは、ネットショップに対応できるものもあります。
メリット:比較的簡易でありながらブログで対応できないWebサイトも作成できる
デメリット:デザインや機能が自社の希望に合わなかった場合には、修正・変更ができない
3.WordPressを利用する
WordPressは、ホームページを作成するためのオープンソースの無料ソフトです。
利用者が多いため書籍やサイトも多数存在し、学習しやすいのが特徴
また、デザインのテーマも無数に公開され、機能やデザインが優れたものも多数存在
PHP・HTML・CSS等の言語知識があれば自身でテーマを編集し、細かくカスタマイズすることもできます。
さらに、ユーザ権限を管理する機能を持つため、サイト全体の管理者・記事執筆者・デザイン変更者などさまざまな担当者を登録し、それぞれに権限を持たせることが可能
WordPressを利用する場合にはサーバとドメインを自社で用意する必要があります。
メリット:自由にカスタマイズができ、自社の希望に即したWebサイトを作成できる
デメリット:PHPやHTMLなどのある程度のコーディングの知識が必要となる
4.コードを書き込む
HTMLやCSS、JavaScripなどの言語を用いてコードを書き込み、サーバー上にアップロードすることでWebサイトを作成する手法です。
Webサイトを作成する上での最も基本的な手法であり、一番柔軟に思い通りのサイトを作成することができます。
ただし、HTML・CSS・JavaScriptの言語知識が必要
テキストエディタという無料のソフトのみで作成できますが、Webサイトを公開する際にはWordPressと同様にサーバ・ドメインを準備する必要があり。
メリット:Webサイトを一から作り上げるため、自社の希望通りのサイトを作成できる
デメリット:最も難易度が高くコーディングの深い知識が求められ、Webサイト全体のコーディングをしなければならず時間がかかり、運用時のメンテナンスも自社内で実施しなければならない
Webデザイン・DTPデザイン・グラフィックデザインの違い
Webデザイン・DTPデザイン・グラフィックデザインの違い
| 種類 | 媒体 |
|---|---|
| Webデザイン | Webサイト |
| DTPデザイン | 印刷物 |
| グラフィックデザイン | 印刷物など、視覚に訴えかける表現全般 |
WebデザインはWebサイトのデザインをします。
DTPデザインとグラフィックデザインの違い
両者とも、広告やパッケージといった印刷物のデザインを行う点は同じですが、グラフィックデザイナーはDTPデザイナーのように印刷用データを作ったり、製版作業を行ったりはあまりしません。
「DTPオペレーター」とは、グラフィックデザイナーが作成したデザインを印刷用データに変換する作業を行う人のことをいいます。
自分でデザインをすることはありません。
印刷会社には、一般的にグラフィックデザイナーとDTPオペレーターの両者が存在することになりますが、現在では両方を兼務している方も多いため「DTPデザイナー」という言葉が生まれました。
また、DTPデザイナーは印刷用データを作成する必要があるためPC操作能力が必須ですが、グラフィックデザイナーは必ずしも制作物をPCで作成する必要はありません。
視覚に訴えかける表現全般を制作するのがグラフィックデザイナーです。
Webデザイン参考サイト
Webデザイン作成するときに参考にできるサイト
WEBDS.com
SANKOU!
Parts.
sps collection
RWDJP
マネるデザイン研究所
https://maneru-design-lab.net/page/2
81
straightline bookmark
デザインフリー素材サイト
商用OKでクレジット表記不要のサイト
Undraw
https://undraw.co/illustrations
Drawkit
IRA Design
イラストAC
https://www.ac-illust.com/
無料会員だと、検索できる回数が1日5回までで、1日にダウンロードできる数も決まっているため注意
FLAT ICON DESIGN
ハンコでアソブ
ICOOON MONO
EC design
デザイン配色に悩んだときの参考サイト
1.Adobe Color CC
https://color.adobe.com/ja/create/color-wheel/
世界中のAdobeユーザーが投稿した配色パレットが閲覧・利用できるため、デザイナーはまずチェックしたい便利なツールです。
iPhoneやiPadではAdobe Captureという名前のアプリで利用できます。 外出先で撮影したものから配色を作って同期できます。
2.Happy Hues
https://www.happyhues.co/
画面左に並んだ配色パレットをクリックすると、その配色をフラットデザインに反映させたサイト全体のサンプルがレビューできるサービスです。
背景やマウスホバーなど、実際にサイトコンテンツ内に反映させた場合のサンプルがさっとチェックできる
3.ColorDrop
https://colordrop.io/
豊富な4色の配色パレットを集めた、シンプルで使いやすいツールです。
配色パレット・写真からの抽出・グラデーションツール・ソートやフィルタリングなど機能が充実。
4.Pigment
https://pigment.shapefactory.co/
2色の配色をさらに調整できるため、こだわりたい人におすすめ。
5.Color Supply
https://colorsupplyyy.com/app/
補色や類似色、3色または4色の配色を探せるツールです。
6.Nippon Colors
https://nipponcolors.com/
日本の伝統的な色を探せるサイトです。
7.Colorable
https://colorable.jxnblk.com/
背景と文字色のコントラストを、アクセシビリティとして適切かどうかの判断ができるツールです。
Webフォント
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術です。
家庭用PCでは、予めインストールされているフォントは少なく、基本ソフトとなるOC（オペレーティング システム）のバージョンにより、標準搭載されるフォントが異なるため、使用できるフォントも限られていました。
windows10から標準搭載 UDデジタル教科書体・Yu Gothic UI
windows8.1から標準搭載 游ゴシック・游明朝
windows7から標準搭載 Meiryo UI
windowsVistaから標準搭載 メイリオ
windows初期からのフォント MSゴシック・MS明朝／MSPゴシック・MSP明朝／MS UI Gothic
Webページの読み込みと同時に、ネットワーク上にあるフォントデータをダウンロードすることができるため、どのデバイスで見ても制作サイドが意図したフォントで表示することが可能。
Webフォントを使用するメリット
1.
SEO効果を保ったまま、デザイン性を高めることができる
Webフォントの最大のメリットは、デザイン性の高いサイトの構築ができる点
ユーザー環境に寄らず、豊かなデザイン表現が可能となったことで、作成者の意図する印象を与えることができたり、文章の可読性・視認性を高めることができるようになりました。
従来は、デザイン性の高いサイトを構築する際、デザインフォントを含む箇所を画像としてWebサイトに配置してきました。
しかしこの方法では、検索エンジンの情報収集ロボット「クローラー」に画像と判定され、記載した文字情報は理解されません。
多彩なスタイルを持つWebフォントの出現でテキスト表現の幅が広がり、クローラーにしっかりと内容を伝えられ、かつデザイン性の高いWebサイトが構築できるようになりました。
2.
レスポンシブWebデザインに適している
画面サイズの異なる複数のデバイスに対応するWebサイトでは、折り返し位置やサイズ調整が自動で行われる「テキスト」での表現が最適です。
また、従来のようなデザイン性の高い箇所を画像で配置する方法では、対応するデバイス分の画像パーツの用意が必要になるなど、構築にも更新にも手間と時間が掛かります。Webフォントの出現は運用コストの削減にもつながっています。
Webサイトで扱う画像ファイル形式
各画像形式の種類と特徴
JPG
一般的に使用されている画像形式で、スマートフォンのカメラ（iPhone〈iOS11〉以前）やデジカメでとった画像は特別な設定をしていなければ大体この形式で保存されます。
メリット フルカラー1677万色まで表現することが出来るので、色数が多い画像がきれいに表示される
デメリット 非可逆圧縮という 人間の感覚に伝わりにくい部分を削ってファイルサイズを圧縮する方法で画像を圧縮しており、圧縮率を上げると画像が劣化してしまいノイズが目立つ
GIF
256色で構成されている画像形式です。
透過処理や動きを取り入れた「アニメーションgif」などの表現ができます。
メリット 少ない色で構成されており、比較的データ容量が軽い・アニメーションの表現や透過処理が出来る
※半透明は不可・直線以外の透過は適さない
デメリット 256色以上カラーを使用する写真やグラデーションの表現には適さない
PNG
JPGと同じでフルカラー1677万色まで色を扱うことができ、なおかつ透過処理が行えます。
フルカラーも表現できるのでグラデーションを使用した画像にも適しています。
メリット 画質が劣化しない、透過処理が出来る※半透明も可能
デメリット
ブラウザIE7から対応しているため、古いブラウザなどで対応していない場合がある
データが重い
それぞれの適している
JPG 風景・景色・人物像など多くの色を使う写真
GIF 256色以下のロゴやイラストなど
PNG 透過処理もできるので人物写真の切り抜きや色数が多いイラストなど