2017年11月15日水曜日

Kingsoftで作るパワーポイント資料の作り方(第3回)

今回はKingsoftで作るパワーポイント資料の作り方(第3回)ですが、使うアプリケーションソフトはWindowsに標準で入っている「ペイント」です。


もうすでにKingsoftのPresentationの使い方を第1回では、基本操作第2回では、白紙スライドにテキストと画像の挿入の仕方を説明したので、あとはインターネットのウェブページのキャプチャー画像が取り込めれば、「インターネットサービスの使い方」を説明できるセミナー資料は完成します。

1.まずは「ペイント」を立ち上げましょう

Windowsの左下のウィンドウにペイントと入力してみてください。
すぐに見つけることができます。でてきた「ペイント」をクリックすると立ち上がります。

2.ウェブ画面を画像として取り込みます。

次にキャプチャー(ウェブ画面取り込むこと)したいウェブページに行きます。
ページに行ったら、キーボードの「Print Screen」をポチっと一度だけ押してください。
キーボードによっては「PrtScr」などと略されている場合もあります。

3.ペイントに貼り付ける

ペイントのツールバー、「ファイル」をクリック。一番上の新規を選択すると、白紙のキャンパスが現れます。
次にツールバーの「ホーム」を選択した状態で、一番左側の「貼り付け」をクリック。
または、ツールバーの「ホーム」を選択した状態で、キーボードのCtrを押しながらVを押すと、貼り付けられます。

4.画像に目印を書き込む。

これで、保存すれば、ディスプレイの画像をPresentationに貼り付けられますが、この画像の中に目印を入れたいときもありますよね。
目印の入れ方を説明します。
今回は、Googleのトップページをキャプチャーしましたが、たとえば、「ここに検索したいキーワードを入力します」といったように「ここ」がどこかを赤で示したいとき。

まず、作業しやすいように画像の大きさを調整します。

ツールバーの「表示」を選択すると、「拡大」「縮小」と出てくるので作業のしやすい大きさに調整してください。
ちなみに、画像それ自体の大きさを変えるのではなく、作業しやすいように今、見えている状態を変更するだけの作業になります。
早速、赤い四角で文字入力箇所を目立たせて上げましょう。
ツールバーの「ホーム」を選択した状態で、図形の中から四角いものを選びましょう。
次に色1では赤を選択してみてください。(色2は気にしなくてOK)
そして、任意の場所にマウスでドラッグして、その場所で良いと思ったら、右クリックで確定です。

同じ要領で画像に文字やその他の画像も入力できるようになったと思います。

5.必要な部分だけ切り抜きたいとき

このままでも良いかもしれませんが、Presentationに貼り付けるとき、スペースが限られているので、余計な部分を切り落としたいこともあると思います。
切り抜き(トリミング)をしてみましょう。
ツールバーの「ホーム」を選択した状態で「選択」をクリック。
マウスで切り抜きたいところを選択して、ツールバーのトリミングをクリックして切り抜き完了です。

6.保存する。

保存はツールバーのファイルから「名前をつけて保存」にカーソルを乗せた状態にすると、右側に保存形式を問われるので、おすすめは軽いファイル形式JPG画像で保存してください。
ここで作った画像をPresentationに読み込めば、ウェブサービスの使い方資料は完璧に作成できるはずです。
是非、頑張ってみてください!

Kingsoftで作るパワーポイント資料の作り方(第2回)

今回は、第1回のレイアウトの選択の続きです。

レイアウトの選択で「白紙」を選ぶことで、自由度の高いスライドを作ることができます。

1.レイアウト「白紙」を選び、そのスライドの好きな場所にテキストを挿入する方法

上のツールバー「挿入」を選択
次に「テキストボックス」を選択
次に「横書きテキストボックス」を選択
次にタイトルを入れたい場所をマウスでドラッグして広げると文字が入力できます。
最初は文字が小さいですが気にせず、入力してください。

上のツールバー「テキストツール」を選択
次に文字を選択(マウスで文字全体を選択してください。)
左上の書体の右隣が文字の大きさなのでそこで調整します。
次に文字の大きさが決まったら、右側のアルファベットのAが並んでいる中で好きなデザインを選べば画像のように反映されます。

2.好きな場所に画像を配置する

上のツールバー「挿入」を選択
次にツールバーの下、一番左側の「図」を選択。
すると、パソコンの中の画像を選べるようになるので、選べば貼り付け完了です。
大きさや位置は、マウスで簡単に調整ができます。

基本、この文字(テキスト)と画像が自由に挿入できればどんな資料でも作ることができます。
最終回は、Kingsoft Presentationから離れて、ウェブ画像の取り込み方を紹介します。
ウェブ画像を取り込むことができれば、あとは、今回の画像の貼り付けでセミナー資料は完璧ですよね。
Kingsoftで作るパワーポイント資料の作り方(第3回)へ

Kingsoftで作るパワーポイント資料の作り方(第1回)


PowerPointの互換ソフト。KingsoftのPresentationで作るPowerPoint資料の作り方を紹介します。

Presentation自体がほとんどPowerPointと同じ作りなのでそのままPowerPointユーザーも参照いただけると思います。
今回はセミナー資料を想定しています。
セミナーでウェブサービスの使い方を説明する資料など、ウェブ画面をキャプチャーしてそれを画像として貼り付ける方法をご紹介します。

1.Presentationを立ち上げる

すると、タイトルとサブタイトルを入れる画面が表示されます。
これをそのまま入力しても良いのですが、少し味気ないですよね。

2.デザインを変える

上のバーから「デザイン」を選択します。真下にデザイン一覧が出ますが、横並びで少し見えにくいのでデザイン一覧の右側の「デザインテンプレート」をクリックすると右側に全てのデザインが表示されます。その中から好きなデザインを選んでクリックすれば適用されます。

注意点としては、ここで選んだデザインテンプレートが全てのスライドに適用されてしまうので、シンプルなものがオススメです。

3.スライドページを増やす


デザインを選んだら、文字を入力してスライドを増やしていきましょう。
左サイドバー(小さいスライド画像のあるところ)の上で右クリックするとタブが開きます。その中の「新しいスライド」を選択すると、スライドページが一つ増えます。

4.スライドページのレイアウトを変える

新しいスライドが生成されましたが、勝手に上がタイトル、下がコンテンツという構造になっているので、これを変更したい時の方法です。
レイアウトを変更したいスライド(左サイドバーのスライド画像)の上で右クリックをするとタブが開きます。
そのタブの中からスライドレイアウトを選択。
右側にレイアウトのサンプルが表示されるのでクリックして適用されます。
この繰り返しでスライドを作成していくことでプレゼン資料が完成します。

第2回はウェブサービス画面を画像として貼り付ける方法をお送りします。

2017年10月16日月曜日

ジャンルでウェブサイトを分けるべきか?のSEO対策


ターゲットが異なるサービスの場合、ウェブは分ける分けない?


問題です。以下の場合の適切なウェブの展開方法を答えなさい。


会社Xの中には、a事業部とb事業部があります。

a事業部では、企業向けサービスxと一般家庭向けサービスyを取り扱っています。

b事業部では、一般家庭向けサービスzを取り扱っています。

この場合のウェブの構造として適切なものは?

1.全て同じページにする。

2.事業部別ページにする
3.ターゲット別ページにする

適切とは何を持って適切というのか?

それは、ただ一点、ユーザビリティです。ターゲットが情報を得るときに関連情報を得やすい状況はユーザビリティが高い状況と言えます。

たとえば、1の場合

zの情報が欲しい、一般家庭に主婦にとって、事業者向けのxの情報はあまり欲しい情報ではないと言えます。yも掲載されていますが、xがあることで情報が埋もれてしまうリスクもある。

2も同様

事業部別にするのは、情報提供側の都合でしかありません。

基本は3を選ぶことになります。

よくSEOではどうですか?という質問が上がりますが、以前のようにテクニックでSEO効果を上げる時代はとうに終わっています。
ユーザビリティ=使いやすさを向上させることが、そのままSEO対策に繋がると思って間違いありません。

ドメインは分けた方が良いですか?

更に言えば、ドメインも性格を帯びてくると言われています。
ターゲットごとにドメインを分けることもまた、有効な手段と言えるようです。

2017年10月8日日曜日

ワードプレスのAMP化後のエラーは回避できない?

amp

運営中のWordpressをAMP化する方法は2つ

  1. プラグインを使う
  2. AMP対応テーマに切り替える
2つに一つです。ただ、どちらにしても、以下のメールがGoogleからやってくるのは必至。

Search Consoloより「AMPページのエラーを修正してください」


エラーの箇所をチェックすれば、使ってはいけないタグが使われていますよ!という内容です。
それはそうです。
AMP化前の記事ですから、当然、画像はimgタグですし、Youtubeの埋め込みもiframeタグです。

プラグインによっては以下のようになります。

AMPページでは、記事の中にimgタグで埋め込まれた画像はそのスペースだけ残して非表示になる。
それはそれで格好が悪い。

実に悩ましいワードプレスのAMP化

記事の中の<img>タグのすべてを<amp-img>タグに変換するのもどうにか大変です。
過去記事一つ一つ、書き直すことになるのでしょうか。
なにか、裏技がある方がいらっしゃれば教えていただきたいくらいです。

後からのAMP化は悩む!先にAMP化が必須。

いずれにしてもAMP化は、現在、運営中のモノを途中から対応するのがなかなか骨の折れる作業になります。新規でサイトを作るときは、織り込み済みで対応しておくに越したことはないのかもしれません。

AMP化でデザインをきっちりやりたいときは・・・

AMP化したページはなにも同じドメインでなくても良いそうなので、人気記事だけAMP対応して外側にHTMLで作るというのも「離れ業」として使っても良さそうな気がします。

AMP対応ページ一本勝負はオススメしません

AMP対応。2018年に向けた気付き

Googleのウェブ管理ツールを使っていてampというワードに気付いた去年。
今年になって本格的に導入を試みた。
そのレビューです。

AMPの説明はこちらに引用しておきます。

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。出典:SEO HACKS
イメージとしては、一見、PCサイトページに対するスマホサイト専用サイトのような感じですね。
PCサイトとスマホサイトを一括で表現できるレスポンシブサイト、いわゆる可変デザインが主流になって定着したところに「再び分けろ」という寝耳に水の話がAMPなのでしょうか?

このAMP、「スマホサイト」ともまた違うくせ者

スマホでURLに直接、アクセスしてもこのAMPサイトに飛ぶわけではない。
そういう意味でスマホサイトともまた違う。
どうやってたどり着くか?というと、検索結果でAMPページがある場合、そのAMPページへのリンクが表示されるということ。
このページにはAMP版もありますよ。という感じ。
ダイレクトに来たユーザーにAMP版をどうしても見せたい場合は自らノーマル版のページの中にAMP版へのリンクを貼ってあげると良いでしょう。

AMPが出てきてもレスポンシブは不要ではないということ

検索結果にAMP版もあるよとでる程度なので、そのままノーマルページにアクセスしてくる人も大多数いると思われるので、レスポンシブデザインの継続は必須。

一層のことサイトまるごとAMP対応にしてやろうと思い失敗した

AMPの意味はわかったけど、以前、PCサイトと、ケータイサイトと2つ同じ内容のモノを別のデザインで作っていた時代には戻りたくない。
経験上、どちらかがおろそかになったりするのです。
その点、レスポンシブデザインは一括管理がとても楽になった。
2つ作る。あの時代には戻りたくない!ということで、すべてのページをAMP対応にしようと試みた。
果たしてどうだったか?

AMP対応ページ一本化作戦はAMPの癖が強くて撃沈です。

まず、画像の貼り付けが面倒。
タグが違いますから。でも、この辺だけであれば我慢できるのですが、問い合わせフォーム。formタグが使えるようになったとはいえ、いまいち、うまくいかない。この辺は、研究すれば済むことなのですが、ここで一つ気付いたことがあります。
AMPは検索結果に表示されたAMPページロゴやリンクを選んだ時に表示されるページ。
つまり、検索結果からいきなり、問い合わせページに飛んでくるのか?という疑問。
アクセス解析を見れば、ランディングページはどこのページが多いのか?は一目瞭然。
いきなり問い合わせフォームに入ってくるなんてせっかちな人はいません。
要するに・・・問い合わせページのAMP化なんてそもそも不要ではないですか!
だから、AMPという概念が生まれた当初はformが未対応あったのではないか?という予測が立ちます。
この点からして、AMPは全ページやればいいとかそういうモノではないですよ!という行間も読み取れる。

ということで、ランディングページになっていないページはわざわざAMP対応にするのをやめた。
でも、さらに問題が。
AMP対応ページと、AMP対応しないページ。これら、同じCSSの記述でも、なんだかズレる。対応していないCSSやHTMLタグが混在していると、AMPページでは反応していないものがこちらでは反応するので、結果的にズレが発生することも出てくるでしょう。

結論

素直に、今まで通りにレスポンシブサイトを作り、主なランディングページやコンテンツページのみ、AMPページを別途作る。
当初、嫌がっていた二刀流がベターだというところに帰ってきました。

ワードプレスのAMPプラグインでは記事ページのみ

ちなみに、ワードプレスの場合はプラグインでお手軽にAMP対応ページが生成されるようですが、記事ページのみがAMP化されるのが一般的なプラグインの機能のようです。
トップページやカテゴリーページなどはAMP対応ページが生成されない。
なんて中途半端な!と思ったけど、ランディングページの多くが記事ページですからね

思うに、グーグルがやりたいことは・・・

「コンテンツ」をユーザーのために軽量化してあげてください。というメッセージなのだと思います。コンテンツとは、外観や概要ではなく、中身。
ニュースサイトでいうところの記事ですね。それをAMPとしてGoogleサーバーでもストックしてスピード対応しますよ!ということ。
デザイナーがやるべきことは、主にランディングページになっているページをAMP対応して、AMPページから離脱されないように、うまく誘導させることだと思います。

AMPはもう一つのデザインというよりも・・・

イメージとしては、ウェブのテンプレートデザインを2種類作ると言うよりも、コンテンツの中に、より詳しく説明するために映像や、PDFや、スライドが埋め込まれて使われていることが多いですが、どちらかというとそちらに近い感じがします。
「こっちも見てみて」という感じにやや近めだという認識です。

Amazon パソコン周辺機器売り上げランキング

Kingsoftで作るパワーポイント資料の作り方(第3回)

今回はKingsoftで作るパワーポイント資料の作り方(第3回)ですが、使うアプリケーションソフトはWindowsに標準で入っている「ペイント」です。 もうすでにKingsoftのPresentationの使い方を 第1回では、基本操作 。 第2回では、白紙スライドにテキス...