Webdesigner-meetup
2019,04,06
webdesigner-入門編
- HTML／CSSの入門編
- SEOの入門編
- WordPress
- jQuery/javascript入門
- PHP
WordPress
- 世界中のサイトのおよそ4分の1はWordPress
- テーマ・プラグインが豊富
- Web上に多くの情報が出回っている
- HTMLやサーバーの知識がない人でも更新が可能
- 複数人で運用
メリット
WordPressデメリット
- サーバーサイドの知識
- アップデート
- セキュリティリスク
- お金がかかる（サーバー・ドメインを自前で用意する必要がある）
- 自分で調べる（ググる）力が必要
- Google（search console / analytics）の知識が必要
- 時間が必要
ゴールを決める
1,（ ）
2,ながさーちに記事を書く
必要なスキル
-
HTMLとCSS
-
JavaScript, jQuery
-
デザインの基本スキル
-
UI/UXデザインのスキル
-
デザインツールのスキル
-
SEOとアクセス解析
meetup
- 環境設定
- SEOの基本
- WordPressの基本機能と使いかた
- 記事を書いてみる
- キーワード選定
- code編集（html/css）
- ITTOOL紹介
- アナリティクス基本操作
- SEOライティングについて
- bootstrap
- CSS
- PHP
- WordPressテーマ作成
- ながさーちに記事を投稿
HTML5入門／CSS3入門
HTML5=テキストや画像
CSS3=レイアウト、カラー
<!DOCTYPE html>
<html>
<head>
<title>ながさーち</title>
<meta charset="UTF-8">
</head>
<body>
<h1>ウェブサイトを作る</h1>
<p>HTML5について</p>
</body>
</html><style>
body {
color: gray;
}
</style>.html
.css
SEO入門
あるキーワードで検索されたとき、上位表示を狙うために必要となる技術
コンテンツの質とSEO内部対策
hタグとキーワードの選定
alt属性を設定
WordPress
- HTML
- CSS
- PHP(MySQL)
- Javascript(jQuery)
<header class="page-header">
<h1 class="page-title"><?php single_post_title(); ?></h1>
</header><h1 class="c-site-branding__title">
<a href="https://cuusoolab.com">cuusoolab</a>
</h1>- plugin
- テーマ作成
- カスタマイズ
- コンテンツ管理
ITTool
- Editor
- sketch
- Illustrator
- Photoshop
- FTP
- Chat
- ドメイン
- サーバー
Googleアカウント
WordPresseを使ってみる
login
Googleアカウント取得
Chat system 導入
chatwork
PC環境を整える
パスワード管理ソフト
1Password
Lastpass
Text Editor
ATOM
「インデントガイドを表示」
「不可視文字を表示」
「ソフトラップ」
FTP
ビジュアル編集ソフト
sketch
CANVA
Local環境-WordPress
FLYWHEEL
FLYWHEEL初期設定
- ダウンロード
- VirtualBox、Host Machineの順番にインストール
- WordPressをインストール「CREATE A NEW SITE」
- 「Preferred」最新バージョン
- WordPressのユーザー名/WordPressのパスワード/WordPressのメールアドレスの設定
- \Users\ユーザー名\Local Sites
WordPressでWebサイトを公開する手順
- レンタルサーバーに登録する
- ドメインを取得・設定する
- WordPressをインストールする
- サイトの基本設定を行う
- テーマを設定する
- プラグインをインストールする
その他の便利なツール
- Evernote（メモ・ノートの共有）
- jpagmini (画像圧縮)
- skitch（画面キャプチャ）
- Dropbox
- Box
- Firefox
- MindMap
- git-github
SEO
SEO対策の基本
タイトルの前方に
キーワードを含める
32文字以内
見出しの付け方
h2 → h3 → h3 → h2 → h3 → h4 → h4 → h3 → h4 → h4
見出しをつける
キーワードを含んだ見出しを書き、記事の内容（要約）をはじめに書く
画像と動画
滞在時間が検索ランキングの要素の一つなので、適切な量の画像や動画を配置する
ALTの設定と画像ファイルの名前
モバイルファーストインデックス
スマホ対応していること。
レスポンシブ流デザインが基本
またそれだけでなく、スマホでの読みやすさが大切。
文字数
5000文字以上
キーワードの選定
検索キーワードのボリューム
関連キーワードの選定
サジェスト
関連キーワードの選定
ライティング
- コピーコンテンツ
- ただ文字数を多くすればいいわけではない。
- 語尾は統一、オススメはですます調（内容次第）
- 自分なりの見解を添える
- 言いたいことではなく、人が知りたいことに答える
- リライト
コンテンツの構造化
マインドマップもしくはツリー化して、文章をわかりやすく階層化する
階層化したものとhタグを合わせて書く
Web制作
By EIJI ORIME
