小学生・中学生向け「ロジックプログラミング」

愛知県名古屋市のウェブ屋:あいちゃんです。
小学生&中学生向けプログラミング教室を、一社・千種(鶴舞)・名駅・栄生でやってます。


本日のJEUGIAイオンタウン千種校のメニューはロジックプログラミング

これまでずっと、HTMLとCSSでホームページを作る勉強をやってきました。

ホームページがいくつか完成したところで、オリジナルのアイコンやバナーをつけたいよね〜ということで、ファビコン作りに挑戦です!

ホームページを作ったら、やはり欲しいですよね。かわいいファビコン!

自分のホームページを持っているのに「ファビコンって何?!」と思ったオトナの皆さん、知らないと、子どもたちに「えーww」と笑われちゃいますよ。
ファビコンとは、簡単に言うと、アイコンの小さいやつホームページのブランドマークです。
子どもたちには「うごメモ」のカエルみたいなマーク→を作ってみよう。と説明しました。(低学年にも「うごメモ」が通じました…)


今回のカリキュラムでは、このファビコンをロジックで作成します。
京都大学パズル同好会のブログ

ロジックというと、縦と横の数字をヒントに塗り潰すマス目を割り出し、そのとおりに塗り潰していくと、最終的に絵(画像イラスト)が完成するものが思い浮かぶと思います。

*京都大学パズル同好会のブログ『パズル蔵』より引用。


しかし、子どもプログラミング教室では、難しい計算式などは使わず、ウェブツールを使って直感的に操作&デザインしていきます。
このワークに入ってからというもの、みんな無口になりました。
普段、集中力に欠ける子も、ファビコン作成は楽しいようです。



オススメおためし受講で体験してみましょう!

日時:第2・4金曜日16:30-18:00
会場:JEUGIAカルチャーセンター イオンタウン千種
料金:おためし体験会は2,430円
対象:小学4年生〜中学3年生
定員:8名
持ち物:ノートパソコン
お申込みボタン

バナー工房を使って3分で写真に文字入れ

愛知県のホームページ専門家:田口相です。
岐阜県恵那市(恵南商工会議所)で、商売に活用できるウェブサービスのあれこれ相談会をしています。今日の相談は、、、

  • ホームページの構成をチェックしてほしい
  • YouTubeチャンネルの作り方〜動画の載せ方
  • YouTube動画をホームページに乗せる方法
  • ホームページの見え方をスマホ対応にしたい
  • はてなブログに定型文を設定する方法
  • 内部リンクと外部リンクの違いとその貼り方
  • Googleマイビジネスの使い方

など。
その中で、恵那市岩村のバイク工房 岩月さんから「新しいブログを始めたことをホームページでもお知らせしたい」というご要望がありました。ホームページを確認したところ 2カラム形式だったので、左カラムにブログへの誘導バナーを作ることにしました。


3分でできあがり!サクッと作ったバナーがこれ。


バナーの作り方



画像加工ソフトがなくてもバナー作成


バナー1つ作るのに、わざわざソフトをダウンロードして…というのは面倒です。
スマホでも簡単にバナーを作れるアプリはありますが、今回の相談者さんは「パソコンでやりたい!」とのご要望。

そこでオススメしたのが、オンラインで画像加工と編集ができるバナー工房です。
画像に文字入れ」はもちろん、いろいろと高度な加工ができます。

バナー工房の便利なツール



バナー作成は 技術よりも画像選び


バナーの土台となる画像選びは大事です!
デザイン的に美しく作成したいのなら、単色無地グラデーションがオススメです。

しかし、今回は

  • 限られたコンサル時間の中でサクッと作る
  • ブログタイトルは「バイク女子渚ちゃん〜」
  • たくさんの人にクリックしてもらうことが目標

であれば、やはり、バイク渚ちゃんに登場してもらいましょう!
楽しい雰囲気が前面に出ている写真であれば、なおGoodです。

バイク工房岩月のバイク女子渚ちゃん

渚ちゃん、カワイイですね!明るくていい写真だと思います。

しかし、この写真一択というのがツライです…。
背景がごちゃごちゃしている画像ほど、文字の載せにくいものはないんです。

ですが、「これしかないです!」と言い切られてしまったからにはこれでいきましょう!



文字には「影」や「縁どり」をつける


背景に色がいっぱい入っている場合、文字を浮き立たせて読みやすくします。
バナー工房には「」をつけたり、「文字枠」をつけて画像と文字の境界線をはっきりさせたりする機能があります。

どちらも大きくつけすぎると、かえって見づらくなるので、サイズは「1」にしました。文字色は、言われなければ分からないレベルの「ほんのりピンク」です。女子っぽく。

オンラインでホームページバナーが作れるwebツール

バナーなので横長にカット。
バイクと渚ちゃんがギリギリ入るところで切り抜きました。

ブログタイトルが長かったので2行に。
それでもまだ文字数多く見えますが、ここを3行にしてしまうとダサくなります。

誘導バナーを3分で作る方法



パソコン・スマホ両方から見え方をチェック


完成したバナーをホームページの左カラムに設置して、ブログURLにリンク!
...が、これで完成ではありません。

バイク工房岩月さんのホームページはジンドゥー(JIMDO)で作成されていました。
実は、ジンドゥーなどのCMSで作成されたホームページの場合、スマホで見たときに、左右のカラム(サイドバー)が表示されていないことが多いのです。ここ要注意です!

スマホからのアクセスが多いホームページですから、せっかく作ったブログへの誘導バナーが見られないのは困ります。そこで、メインコンテンツにもバナーを貼りました。(パソコンで見ると、バナーが近い位置2ヶ所にあって しつこい感じはしますが、これは仕方ないです。)

ついでにバイク屋おやじのブログも宣伝。

バイク工房岩月さんのホームページ(一部抜粋)

やはり、カワイイ女子がバナーになっていると、クリックしたくなりますね!

文字だけのバナーを ひと手間かけて画像つきのバナーにするだけで、アクセス数はグッと増えます。バナー画像が魅力的であればもっと伸びます!

ひと手間といっても、バナー工房などのWebツールを使えば、ほんの数分で見栄えのするバナーが作成できるので、使わない手はないですね。





オススメホームページ専門家によるホームページ採点!

今回ようなコンサルティングは60分〜受けられます。
ホームページやブログのちょっと手伝ってほしいトコロ、どこを直したらアクセスが増えるんだろう?というお悩み、スマホ対応型にリニューアルしたいけど予算があまりないという相談など、出張講習で解決します。

ハロウィンのDoodle、いいよね!

愛知県のホームページ専門家:田口相です。
ホームページを作るよりは教える「講師業」で活動していますが、こういうデザイン見ると「制作業」もやりたくなります。


ハロウィンのGoogleDoodleが楽しい


毎年10月31日のGoogleDoodleは ハロウィン仕様なので楽しみです。
過去には、葛飾北斎の浮世絵デザインの時もあったけど。。。


完成品よりも下書き<案>を見るのが好き


以下、画像は https://www.google.com/doodles/halloween-2019 より引用

この下書きDoodleが...
↓↓↓こうなる↓↓↓


オバケ屋敷の各部屋のドアをクリックすると、不気味でかわいい生き物たちが出てきて、トリックオアトリートしてくれるのが楽しいです。BGMもカッコイイ!

ハロウィンを過ぎても このページから楽しめます。



どんなデザイナーが作っているんだろう?

調べてみたら、というチームがあり、Doodler(ドゥードゥラー)と呼ばれるDoodle(ドゥードゥル)をデザインする人が何人かいるみたいです。
一般ユーザーがDoodleのアイディアをに送ることもできるそうなので、来年のハロウィンには挑戦してみようと思います。


今日の夜ごはんはカボチャのシチュー🎃



👻🎃🕸ハッピーハロウィン🐺🎃🦇

Canvaでヘッダー画像をサクッと作ろう

愛知県のホームページ専門家:田口相です。
ホームページ制作で欠かせないのが、画像作成・画像加工です。特に、ホームページのいちばん上「ヘッダー」と呼ばれる部分には、ページ内容が一目でわかる写真を入れるといいですね!


ホームページのヘッダー画像を変えてみよう


以前ペライチで作成したLP「先生のための生徒集客ホームページ制作講座」を久しぶりに見たら、ヘッダーの黄昏感がすごかったです。

たぶん、そのときは、オレンジ色で統一したかったんだと思います。オレンジ色は元気カラーでもあるのですが、集めすぎてしまうと“たそがれ”てしまうんです。

ヘッダー画像、オレンジ色が強すぎてたそがれ感がすごい


そこで、時間をかけずにサクッと画像を差し替えしたいと思います。

今回、ヘッダー画像の作成に使うツールは...

アプリでもPCでも無料で使えるCanva(キャンバ)


テンプレートからイイ感じのレイアウトを選びます。

無料の画像加工ツールCanvaの使い方

テンプレートにある元写真(この場合、結婚式写真)を抜いて、いや、抜かずに上書き(上乗せ?)でもOK!

画像デザインツールのCanvaの使い方

ホームページが「先生のための〜」なので、習いごとを意識した画像を並べたいと思います。

Canvaスゴイところは、検索窓に「手芸」とか「子育て」とか 入力するだけで、いい雰囲気の画像がたくさん出てくるところです!
*有料写真を使うとさらにクォリティーがあがります。

Canvaには無料で使えるオシャレな写真がたくさん!


文字を入れることもできるのですが、ホームページに入れたときのことを考えないと、もじもじくんになってしまい、伝えたいことがかえってボケてしまいます。

ホームページのヘッダーに入れる画像はここが注意!


なので、今回は、画像だけのヘッダーに変更したいと思います。

ここで便利なのが 複製ボタンです。同じデザインが下にコピーされるので、元を残しつつ、何枚でも微妙にデザインを変えたものを作成できます。

グラフィックアプリCanvaの使い方


完成!


レッスン・講座・教室のホームページ画像を作ろう



ホームページに入れてみました


*実際のホームページで見てみてください
「先生のための〜」なイメージを残しつつ、落ち着いたヘッダーになりました。

ホームページのヘッダー画像の作り方


スマホ側ではこういうヘッダー画像です。

ヘッダー画像は、パソコンとスマホでの見た目を変えましょう




Canvaにデザインを保存しておく


1-2年前に作成したFacebookイベントページのヘッダー画像。
以前のCanvaインターフェイスで表示されます!もちろん修正も複製もできます。

Canvaにデザインを保存しておくと便利


お客さんのショップロゴ。
*初心者のためのネットショップ制作講座の中でサクッと作成しました。

Canvaでロゴやバナーも作成


Canvaには「デザインが苦手」とか「センスないから」とかいうイイワケは通用しません!テンプレートに沿って写真やイラストを置いていくだけで、きれいなヘッダーかっこいいロゴが作れます。

みなさんも、フォトショップを立ち上げて うーんと悩んでいる時間があったら、ウェブ上でサクッとデザインしてみてください。




オススメそうは言われてもやっぱり自信ない...という人へ
はじめてCanvaを使う人でも、登録から使い方まで30分もあればマスターできます。瀬戸・伏見・一社・長久手・尾張旭・鶴舞などのカフェで開催しているウェブカツinカフェでご相談ください。田口といっしょにCanvaを使ってみましょう。
はじめてストアカを使う方は、ココから500円クーポンをもらってそれを使ってください。

LINE Pay ③ 返金してみました

愛知県名古屋市・瀬戸市・そのあたりのITインストラクター田口相です。
LINE Pay はじめました】→【LINE Pay 投げ銭してもらいました】のつづきです。

LINEpay

前回、LINE Payで投げ銭していただいたことにより、Payの「受け取り」実験ができたので、今回は「返金」実験をしてみたいと思います。


LINEロゴマークLINEトーク画面から


いつものLINE画面。マーチャントから入金のトークが入ってます。
①「View detail」をタップ



②取引詳細の「確認」をタップ



③ポップの「確認」をタップ


全額返金の場合は、この方法が楽チンです。


しかし、全額ではなく一部返金する場面もあると思います。
その場合は、アプリから操作したほうが確実な気がします。
↓↓↓↓↓

LINEロゴマークLINE Pay 店舗用アプリから


アプリの右上「」でこのような画面が出ます。
①「取引履歴」をタップ



②キャンセル可能額を確認して→「払い戻し」をタップ



③返金する金額を入力→「キャンセル実行」



④返金完了!



*決済履歴/トップ画面からも、返金できたかどうかの確認ができます。

  




返金された側(お客さん)のスマホ画面


前記事【LINE Pay ② 投げ銭してもらいました】に引き続き、熊崎さんのご協力でLINEウォレットの画面をいただくことができました〜。感謝!

まずは10円全額返金。



次に一部返金。(100円のうち50円を返金)



以上で、LINEPayを店舗に導入してみたの関連記事は終わりです。

  1. LINE Pay はじめました
  2. LINE Pay 投げ銭してもらいました
  3. LINE Pay 返金してみました ←イマココ




オススメLINE Payの導入相談!
ショップや事務所にLINE Payを導入してみたいけど、一人で手続きするのは不安だなぁ...という方。ウェブカツinカフェまたはメールフォームより お問い合わせください。
LINE Pay加盟店申請〜登録のお手伝いをいたします。

LINE Pay ② 投げ銭してもらいました

愛知県名古屋市・瀬戸市・そのあたりのITインストラクター田口相です。
昨日、【LINE Pay はじめました】というブログエントリ書いて、Facebookに「投げ銭してくれてもいいよ」とふざけたこと書いたら、早速QRコードから「ピッ♪」と入金してくれた人がありました!


パソコンの画面越しでQRコードを読み取って、投げ銭してもらえたことにびっくりです!たしかに鮮明なQRコードだな。



貴重な LINE Pay を投げ銭

してくれたのは、岐阜県中津川&恵那のITヘルプ「iHOPE」の熊崎有美さん。

お会いしたことは1回しかないけれど、パソコンで困っている人の相談に乗ったり、ホームページ制作を手伝ったり、中小企業のウェブ活用コンサルティングをしたり…という点で私と同業者なので、かなり親近感♪な方なのです。

そんな熊崎さんから、【LINE Pay はじめました】のブログを書いた翌朝、「投げ銭したのでうけとってくださいねー」というメッセージが…。


実際に、QRコード決済を生徒さんに使ってもらうにあたり、お店側(私)は管理画面からどんな処理をしたらいいのか 心構え練習をしておきたかったので、この投げ銭はかなりありがたかったです。

しかも、スマホでピッから支払い完了までのスクショつき!
↓↓↓↓↓

LINE Pay 支払い側(熊崎さん側)のスマホ画面


①QRコードをピッ♪とやって、




②支払い金額を入力→「支払う」をタップ




③確認→「〜円を支払う」をタップ




④パスワード入力




⑤支払い完了!









LINE Pay ショップ側(田口側)のスマホ画面


の3方向からみていきます。

LINEロゴマークいつものLINE画面

①マーチャントから「入金があったよ」のメッセージが入る




②「View detail」をタップすると、




③「確認」をタップすると、





LINEロゴマークLINE Pay の店舗用アプリ画面

④現在、入金されている合計額が大きく出ています




⑤¥10の「product」をタップすると、





LINEロゴマークパソコンの LINE Pay 管理画面


お客さんの支払い番号から検索ができます。




なるほどー。返金機能もあるんですね。これは便利!
次回は、返金に挑戦してみたいと思います。


  1. LINE Pay はじめました
  2. LINE Pay 投げ銭してもらいました ←イマココ
  3. LINE Pay 返金してみました


オススメLINE Payのお話できます!
LINE Payを導入したいけど何から手をつけたらいいかわからないなぁ...という方は、ウェブカツinカフェメールフォームより お問い合わせください。
LINE Pay加盟店登録のお手伝いをいたします。
 
ホームページ制作とウェブ学習支援のWeb500(うぇぶごひゃく) © 2019 | ホームページ | Blog 💀 Web500 | ウェブカツ! |