意外と簡単だけど知られていない「Googleマップ」の編集方法

個人的な話になりますが、最近ビールを飲みに行くだけのサークルを作りました。

その仲間内で美味しい店を共有するために、Googleマップを使って美味しい店にピンを挿したものをシェアするということになり、検索をしながら作業をしてみたのですが、随分と簡単にできることがわかりました。

作業方法はあまり知られていなさそうですし、簡単にできると知っていれば活用できるシーンも多いと思いますので、その手順を紹介したいと思います。


まずPCでGoogle Mapを開き、左上のメニューボタンを押します。
そして「マイプレイス」→「マイマップ」→「地図を作成」の順に選択していきます。


すると上のような画面になるので、検索窓から探したい場所の住所や店名などを入力して、ピンを指したい場所を探し出します。


場所を探し出すことができたら、あとは「地図に追加」を選択するだけ。


この手順を繰り返していくだけで、地図上にいくつもピンを挿した状態のマップを作成することができます。

表示させる店名は任意で編集もできるので「肉がうまい店」「カレーがうまい店」などとメモを入れることもできますし、ピンの色や形も複数の候補のなかから選ぶことが可能。写真を登録することもできるので、「行ったことのあるラーメン屋リスト」をマップ上に作って管理することだってできます。


作り終えたマップはURLが生成され、許可した人だけ閲覧できるように設定したり、URLを知っている人ならだれでも閲覧できるようにしたり、インターネット上で公開することも可能です。

今回作った地図は誰でも閲覧できるように公開していますが、公開されている状態ならWebサイトやブログなどに地図を埋め込むことも簡単にできます。

職場の営業チームでGoogleマップ上に取引先のリストを作って共有することだってできますし、彼女や友人との旅行で行きたい先を共有し合うことだってできます。マップの編集を簡単にできるということを知っているだけでいろいろな活用方法を思いつくのではないでしょうか。機会があればぜひお試しください。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

デザイン校正どうされてます?

こんにちは山形のWEBデザイナー菅野です。

半年以上前から完成が延びに延びて
なかなか終わらなかった
WEBの新規案件を4つほど抱えていたのですが
先月1件を無事公開、今月中で残りの3件も公開できそうなので
制作ストレスが若干減少した今日この頃です(笑)

WEBデザイン進めていくときに
お客様とのデザイン修正のやり取りを「校正」といいますが
公開に向けてスムーズに進めていくためには校正は非常に重要です。

以前 ランガレウェブ でも紹介していましたが
今の時代、コミュニケーションツールも様々あり
校正のやり方も案件によって様々です

ウェブディレクターが使用するコミュニケーションツール

LINE、Facebookメッセンジャー、Chatwork…

私の場合、やはりメールでのやりとりが一番多いです。
そのほかでは
LINE、Facebookのメッセンジャー、Chatworkを使いますが
これらのツールは
タイムライン上でスクリーンショットなどを送りながら
オンラインでメッセージのやり取りができるので非常に便利です。
しかし、あとから情報を振り返る場合は
個人的にはメールが便利なので
メール + 電話 or LINE or メッセンジャー or Chatwork
みたいな使い方もよくします。

ただ、いずれのツールを使ったとしても
お客様からの修正指示がどのように返ってくるかがポイントだったりします。

修正指示で多いのは
文章でそれぞれの修正を箇条書きで
まとめていただくやり方が多いです。
基本的にはこのやり方で問題ないのですが
デザインやレイアウトの修正に関しては伝わりにくいこともあります。

校正紙を出力して手書きで赤字を書きこんで
スキャンしてメール、またはFAXで送っていただける校正は
個人的にはやりすく
相手の気持ちも伝わってきて好きです。
こちらのやり方は手間が多く
お客様にとっても負担があるやり方だと思いますので
手書きの校正をいただいた場合は
感謝の気持ちを忘れないようにしたいところです。
ただ、文字が汚くて読めない場合だけは
「勘弁してくれよ〜」と心の中で愚痴を漏らしてます(笑)

最近だとiPadでペンタブを使って
直接PDFに書き込み
そのままメールで飛ばしちゃうなんて
やり方もあるみたいなので
手書き派の人はオススメかもしれませんね

 

校正のやり方にこれだという正解はないと思いますので
お客様と自分にあったやり方で
より良いWEBサイトを作っていければと思います。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

FTPとは?│Web用語集

FTPとは“File Transfer Protocol(ファイル トランスファー プロトコル)”の頭文字を取った言葉になります。

Transferは「動かす」「移す」、Protocolは「手順」「決まりごと」という意味なので、直訳すると「ファイルを動かす決まりごと」というような意味になりますが、ざっくりと「ファイルをサーバーに転送する仕組み」と認識してしまって失敗することはないでしょう。

通常htmlファイルや画像ファイル、プログラムファイルなどをWebサイトのデータをサーバーにアップロードするには主にFTPソフトを使用します。
FTPを使うとサーバーにアップロードされたファイルの一覧を閲覧したり、サーバーにファイルをアップロードするだけでなくダウンロードもできるようになります。

FTPについて詳しく知りたい方は以下をご覧ください。

目次

他のサイトでの説明
使用例
復習クイズ

●他のサイトでの説明

【入門】FTPとは?通信・ソフトについて分かりやすく解説します | カゴヤのサーバー研究室
https://www.kagoya.jp/howto/network/ftp/
難しい内容も多いですが、FTPについてとても詳しく解説されています。

FTP(エフ ティー ピー)とは | コトバンク
https://kotobank.jp/word/FTP-1630
いろいろなサイトに掲載されているFTPについての解説をまとめています。

FTPとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
https://wa3.i-3-i.info/word1137.html
初心者にもわかりやすい解説です。

●使用例

「FTPの設定情報を送っておかなければ」
「このディレクトリの中のファイルを全部FTPでダウンロードしてください」
「無料でダウンロードできるものでいいからFTPソフトは入れておいてね」

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

ソフトは変わるよ

みなさんこんにちは。むらたてつろうです。
私の仕事は大きく分けると、「ディレクション」「デザイン」「コーディング」「プログラミング」の工程に分けることができ、この流れに沿ってウェブサイトを作っていきます。
ディレクションからプログラミングまで全てに関わることもあれば、分業をすることもあります。
今回は、3年位前に分業でコーディングのみを担当することになった案件の話です。

コーディングの手が足りないということで、制作会社から、食品系のウェブサイト制作のコーディング依頼を受けました。
納期は5日とやや短かったものの、事前にデザインのラフを見せていただいたところ、シンプルなデザインですんなり終わると思っていました。

ところが、デザインを受け取ったら、なんとファイヤーワークスで作られていました。
デザインソフトの主流は、「フォトショップ」や「イラストレーター」だったので驚きました。
私はファイヤーワークスというソフトの存在は知っていましたが、使ったことはありませんでした。
触れたことも無かったのでソフトをダウンロードし、インストールをするところから始めなければいけませんでした。

インストールの最中にファイヤーワークスについて調べてみると、
6年前の2013年5月に新バーションの開発がストップしてサポートも終了しているとのこと。
その為公式ページにはダウンロードボタンが表示されていませんでした。
WEBのデザインに特化していて、印刷用のCMYKはサポートされていない。
ラスター形式(フォトショップと同じピクセルを用いた表示)とベクター形式(イラストレーターと同じ数値や式を用いた表示)を同時に扱うことができる。
そして、熱狂的な信者が未だに相当数いるということがわかりました。

ダウンロードしてファイルを開くことができましたが、使い方がわかりません。
普段使っているフォトショップやイラストレーターの画面に所々似ているものの、やっぱり違う。
私は調べながら作業を進めました。
その結果、実質3日位と考えていた作業が締切である5日目までかかることになってしまいました。
無事納品できましたが、今後はデザインの受け取りフォーマットはしっかり確認しようと誓いました。

私がWEBの勉強を始めた10年前、WEBデザインはフォトショップが主流でした。
その後、印刷デザインで主流だったイラストレーターがWEBでも使われるようになり、今は「XD」や「Sketch」といった新しいソフトが主流になってきました。
今使っているソフトに愛着を持って使い続けながらも、明日は我が身にならないように、主流のソフトの勉強もしっかりできていることはWEBデザイナーにとっては必要のスキルのようです。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

Twitterに投稿した画像のサムネイルを切れさせずに表示させる方法

FacebookやInstagramなどのSNSにはいろいろありますが、そのなかでもTwitterは特に拡散力が高いことで知られています。

テレビなどのメディアで「ネットで話題」と取り上げられるものはTwitterをきっかけに注目されることがほとんど。Twitterを効率よく使って自社製品やサービスも話題にさせたいと鼻息を荒くしている企業さんも多いのではないでしょうか。

サイズの合わないサムネイル画像はAIがトリミングしてしまう

例えばハロウィンの期間に開催する特別セールの告知として上の画像を用意し、Twitterに投稿したとしましょう。


するとタイムラインにはこのように表示されてしまいました。ハロウィンをお祝いしていることはわかりますが、肝心のセールの内容がまったく伝わりません。縦長の画像は一部分しか表示されなくなってしまうのです。

では横長の画像にすれば解決するのかといえば、そんなこともありません。


こちらも極端な例ですが、画像の両サイドに商品写真と特典内容が入った画像です。これもTwitterに投稿してみると……


やはり全体が入らず、文字が入っている部分を中心にトリミングされてしまいました。

実はTwitterでは規定のサイズを上回る画像が投稿されたり、画像が複数枚投稿されたときはAIによってトリミング位置を調整しているそう。ユーザーにとって必要な情報はどの部分になるかを判断してサムネイル画像を切り出しているのです。

これはこれですごいことなのですが、逆に「どうせ切り抜くならそっちじゃない部分を切り抜いてほしかった」と感じることも多そうですよね。今回のふたつの例もセールの内容や、タピオカミルクティーの写真を入れてくれたほうが拡散力はありそうです。

意図した通りのサムネイルを表示させる方法

それでは、どのようにすれば意図した通りにサムネイルを表示させられるのでしょうか。いくつか方法がありますが、あらかじめ画像の比率をTwitterの規格に合わせるのが間違いない方法です。

Twitterのサムネイル画像はPCとスマホでもサイズが違うのですが、それぞれ最適な画像サイズはPCが【横506px 縦253px】、スマホが【横450px 縦253px】とされています。

そのため、PCの最適サイズである【横506px 縦253px】に合わせ、なおかつ重要な情報は中央に集めた画像を投稿するのがベストでしょう。

また、スマホから投稿をする場合はTwitterアプリの画像編集機能を使ってトリミングするという方法もあります。


画像編集画面でトリミングを選択し、さらにメニューの左から2番目にある「ワイド」の大きさで画像を切り出します。これはサムネイルと同じ比率になっているため、意図した通りのサムネイル画像を作ることができるのです。


このようにセールの内容を中心に切り出した画像をサムネイルにしたツイートをすることができました。

もちろんサムネイル画像がすべてではありません。重要な情報を削ってまで画像を小さくし、無理やりサムネイルを作るのは本末転倒になってしまうでしょう。

それでもたくさんの情報が流れてくるTwitterのタイムラインのなかでユーザーに目を留めてもらうには、サムネイル画像を含めたインパクトは最重要。Twitterをビジネスで活用されている方はきっと覚えておいて損はないはずです。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

カメラを地面に置くとどうなるか

映像を撮り慣れている人は、撮影前に「どう撮るか」頭の中であれこれと考えるもの。
そんな時、絵コンテがあるとイメージの広がりを助けてくれます。

何か重要そうなシーンや、ドラマチックな場面は、極端なローアングルで撮ってみる、というのも一つの手。

つまり、カメラを地面に置いてしまうわけですね。

カメラを地面に置くと、どんな感じになるのか、
絵コンテを描いてイメージしてみましょう。

ここでは、何でもない日常の一コマ、を題材に選びました。
ちなみにそれぞれ、左が絵コンテ。右はカメラの位置を記したもの。

こうして並べることで、撮りたい構図とともに、カメラの設置に難がないかどうかも判断が可能になります。
カメラマンも自分のすべきことがすぐに理解できるわけですね。

【例1】後ろから来た自転車に気づく人

手前に自転車の車輪が、どん!と入ってきて、キキ・・と止まる。

その音に気づいた歩行者は思わず立ち止まり、後ろを向く。
この際、歩行者の目線は画面の上の方(自転車に乗った人)に向いている。

これ、なかなか面白い構図ではないでしょうか。

それに、自転車に乗っている人が何か問題を起こしそうな雰囲気も出しています。
そう、「何かが起こりそう」=「ドラマチック」ということ。

描いてみて、車輪はもっとカメラギリギリまでくっついた方が迫力出るな、と感じました。
そうなると、カメラマンと一緒にカメラを壊さない置き方はどうか?という話し合いになります。

何でもない一コマが、何かが始まりそうなシーンに化けたのではないでしょうか。

【例2】うっかり落とした定期券を拾う

カメラの目の前に定期券を置いて、撮影します。
画角の真ん中に定期券があることで、これがストーリー上、重要な小道具になる、という映像になりますね。

 

ここで僕は、ちょっと絵が物足らない、と感じました。
カメラに超広角レンズをつけてみるとどうでしょうか。

超広角レンズで画面がゆがみ、画面の中にさらに多くの人が写り込みます。

これにより、近くを歩く人々が誰も気に留めない非情さが伝わってくるかもしれません。
また、定期券の重要さがさらに強調されるかもしれません。

超広角レンズを表現するために、中心から離れるほど湾曲していくように描いています。

僕はいつも、こうやって絵コンテを描いて、頭の中のイメージを膨らませているんですね。

私のプロフィールをご覧ください。

こんな活動をしています。
http://wepress.web-magazine.jp/2019/06/23/5570/

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

「絵のセンス」の正体は観察力。

絵コンテの話をする際に、避けて通れないのが、「絵を描く」ということ。
「センスがない」と苦手意識を持っている方もいるかもしれません。

言い切ってしまいましょう。
「センス云々」を口にする場合、そもそも観察が足りてないことが多いです。

例として動物を描いてみましょう。
馬と牛、どう描き分けますか?

一番大きな要素を基準に、違いを描き込んでいく

動物を描く際は、その体から描くのが安定しやすい。
馬と牛では、牛の方を身体を大きな四角でどっしりと描きました。

続いて、違いを生み出すポイントを見つけ出し、描き込んでいきます。

首の方向が違いますね。
馬は(斜め)上に頭が来ますが、牛は首と背中が一直線です(赤線)。
首の太さも違いますね。

馬は耳が上にツンと立ちますが、牛の耳は頭の横に来ます。

尻尾も、馬のはフサフサ長いのに対し、牛のはムチのようにしなやかです。

逆に、草を食んでる様子は似ています。

 

違いを生み出すポイントを見つけ出す

今度は、親子を描き分けてみましょう。

基本的に、親に比べて身体の線が細い。かつ脚が身体に対して長い。
こういったことを意識して描いたのがこちらです。

 

牛も同様ですが、こちらは身体がぐっとスリムになり、顔も細面にしてみました。
その分、耳が大きく見えるのが特徴だと思いました。

 

最後に、別の動物と比べてみましょう。

馬と同じようにスリムなイメージのキリンはいかがでしょうか。

 

背の高さももちろん違いですが、ここでは形状に注目します。
馬は四角いのに対し、キリンは撫で肩。

これが基本となります。

 

キリンは身体に対して小顔ですね。
またツノがあるため、牛と同様、耳は頭の横に来ます。

尻尾の形もキリンは特徴的ですよ。
今度、画像検索してみてください。

 

今回、牛もキリンも、模様を描きませんでした。
模様を描かなくても、形状だけでこれだけ伝わるんだ、というのをお見せしたかったからです。

パッと違いを感じる部分はどこなのか?
を探し出す癖をつけるといいでしょう。

今回はあまりに長くなるので割愛しましたが、
僕がこういったイラストを描くときはもう少し細かいことを考えています。
首と足の長さが1:1だな、とかさらにロジックを積み上げているんです。

事実よりも「そう見える」ことを優先する

僕は動物の解剖学者でもなければ、骨格の専門家でもありません。
ひょっとしたら今回ご紹介した僕の分析に誤りがあるかもしれません。

しかし、僕の描いたイラストを見て、「ああ牛だ」「牛の親子だ」とすぐ伝わったなら、伝え方として正しいのだと思っています。

動物たちは、寝るポーズも異なります。
手足の折り曲げ方も全然違うの、ご存知ですか?

しかしですね、一般的に知られていない情報を持ち出して、「これは牛が◯◯している様子なんだ」と主張するのも、伝え方として正しいとは思えません。
「ゾウが泳いでる様子」などは、そのイラストが正しいのかどうかも判断できませんね。
やはり、誰もがすぐに認識できる側面を利用すべきでしょう。

映像で商品をPRする際なども、「一番、そう見える部分を撮る」のは基本だと思っています。

情報の粒度を変えていく

馬と牛、親と子、など比較的違いが明確な例を挙げました。
これらは、ご紹介したようなシンプルな線で描き分けが可能でした。

ところがこれが、同じネコ科を描き分けないといけないケースはまた、話が異なります。
例えば、チーターとヒョウとピューマが並んでる様子、とかですね。

そうなると今度は、大きな形状だけでは難しい。
もっと細かい要素に注目していくことになります。模様とか耳の形、目や鼻の線など。

そう、伝えるための情報には、その時その時で粒度(細かさ)も変えていく必要があるんですね。

同じ衣装を着ているアイドルグループの子達をどう描き分けるか?
戦場の兵士達をどう描き分けるか?

ちなみに、トム・クルーズとブルース・ウィリスは、鼻の付け根の形が似ていると常々思っています。

今回の記事を読んで、皆さんのモノの見方、変わってくるかもしれませんよ。

私のプロフィールをご覧ください。

こんな活動をしています。
http://wepress.web-magazine.jp/2019/06/23/5570/

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

OGPとは?│Web用語集

OGPとは“Open Graph Protocol(オープン グラフ プロトコル)”の略で、FacebookやTwitterなどのSNSにURLがシェアされた際、そのページのタイトルやURL、画像、概要などを表示させるシステムのことです。

大手ニュースサイトの記事をSNSでシェアすると、記事の内容をイメージできる画像が表示されると思います。


これはそれぞれのサイトがOGPの設定をしているから表示されているのであり、自動で表示される仕組みにはなっていません。

例えばOGPの設定ができていないページのURLをTwitterでシェアすると以下のように表示されます。


画像が表示されないので、せっかくシェアされても一目で内容が伝わりにくくなってしまいます。画像がある場合とない場合、どちらの方がクリックされやすいかというのは言うまでもないでしょう。

htmlをある程度理解できていれば比較的簡単に設定することができるので、自社サイトのOGPを設定していない場合は設定しておくことをおすすめします。

OGPについて詳しく知りたい方は以下をご覧ください。

目次

他のサイトでの説明
OGP画像を設定するコツ
復習クイズ

●他のサイトでの説明

いまさら聞けない!OGPとは? | ホームページ制作・作成なら大阪のweb制作.com
https://www.e-webseisaku.com/column/marketing/3947/

OGPとは – Content Hub(コンテンツハブ) | ナイル株式会社
https://cont-hub.com/knowledge/glossary/ogp/

●OGP画像を設定するコツ

URLをシェアする概念の強いSNSであるFacebookとTwitterではOGPの設定の仕方が異なるのですが、特にFacebookは設定が難しいです。

というのも、FacebookではOGP画像が横長で表示されたり、正方形で表示されたりすることがあるため、どちらで表示されても大丈夫なように画像をデザインする必要があるのです。

FacebookでOGP画像がどのように表示されるかをチェックするには以下のサイトを使うとわかりやすいです。

OGP画像シミュレータ | og:image Simulator
http://ogimage.tsmallfield.com/


例えばこの縦長に写った東京スカイツリーの画像をOGP画像として設定したとしましょう。こちらをOGP画像シミュレータでチェックしてみると以下のようになりました。


正方形の画像はツリーの先端がトリミングされたため東京スカイツリーだと認識できますが、横長の画像はツリーの中央部分が切り抜かれてしまいました。これでは何の画像なのかわかりにくいですよね。


続いて、横長の画像で人物が左側に寄っている写真でチェックしてみました。


すると今度は正方形の画像が意味不明になってしまいました。これではOGP画像を設定していてもしていなくても同じです。

このように、OGP画像を設定する場合はSNSで実際にどのように表示されるかまでチェックしておくことが重要となります。

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

音楽サブスクリプションは1再生でどのくらいの利益がミュージシャンに入るの?

Apple Music、Spotify、LINE MUSICなどなど、音楽のサブスクリプションサービスは音楽の楽しみ方のひとつとしてすっかり定着した感があります。

先日も星野源さんの音楽がサブスク解禁されるなど、大物ミュージシャンが次々にサブスクを解禁している流れも利用者を増やす要因となっているのは間違いないでしょう。

大物ミュージシャンがなかなかサブスクを解禁しないでいたのは、サブスクで再生されても利益率が低いからだと言われていました。

利用者は月額を支払えば聴き放題になるのであまり気にしない部分ですが、音楽サブスクサービスで音源を配信しているミュージシャンにはどのくらいの利益がもたらされるのでしょうか。

気になったので調べてみると、以下のページに詳しくまとめられていました。

音楽サブスクの再生単価はどう決まるのか?
https://note.mu/strkrt/n/n1c5c71b69270

記事の冒頭で1再生あたりの単価が0.2~1.2円とされていますが、これは有料会員が音楽を再生した総回数によって左右されるようです。

「有料会員になっているけどほとんどサービスを利用していない」という人が多いサービスほど再生単価が高くなりますし、同じサービスでも月ごとに再生単価が変わっていくことになります。

ざっくりまとめると、現在は1再生あたり平均1円程度。あまりサービスを利用しない有料会員が今後増えれば単価が上がり、逆に有料会員が今まで以上に音楽を聞くようになれば単価が下がっていきます。

1再生1円として考えると、10曲入りのアルバムをフルで聞いても権利者には10円程度しか入らず、そこからさらに権利者で分配されることになるわけですから、なかなか厳しい世界ですね。

ちなみに、2019年7月からLINEスタンプのサブスクサービス「LINEスタンプ プレミアム」が提供開始され、月額240円でLINEクリエイターズスタンプが使い放題できるようになりました。

LINEクリエイターズスタンプの制作者に入ってくる「LINEスタンプ プレミアム」による分配金額も同様に、有料会員がスタンプを使った総回数によって単価が変わるシステムとなっています。

LINEスタンプのクリエイターに向けたガイドラインには、以下の計算式が明記されていました。

(「LINEスタンプ プレミアム」売上総額の30%)× (①/②)
①:本コンテンツを送信した「LINEスタンプ プレミアム」に加入しているユーザー数
②:「LINEスタンプ プレミアム」の対象コンテンツを送信した「LINEスタンプ プレミアム」に加入しているユーザー総数(各対象コンテンツ毎に算出したユーザー数の合算)

実は私もいくつかLINEスタンプを作っているのですが、「LINEスタンプ プレミアム」によってどのくらいの収益が発生するのかこっそり楽しみにしています。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

WEBデザイナーと名乗ってはいますが…

こんにちは山形のWEBデザイナー菅野です…

みなさんは「WEBデザイナー」と聞いたときに
どのような仕事内容を思い浮かべますか?

「WEBデザイナー」と言っても仕事内容は人それぞれで
デザイン・コーディング・CMSなどのシステム構築までトータルにこなす方もいれば
WEBの知識がなくてもデザインはできますので
正にデザインだけを担当してコーディングはしない方なんかもいます。

私の場合は
お客様との打ち合わせから関わらせていただき
ページのデザイン、コーディングまでを行います。

そのほかにも
WEB制作以外の更新サポートなども行なっています。

私のクライアントのインドカレー屋さんにおいては
WEBサイト・SNSは毎週 私が更新しており
そのほかにも広告や取材の手配など
もはや 半分スタッフな感じで関わらせていただいてます(笑)

実は WEB制作以外の仕事も結構やってたりします。

デザインの経歴においても
はじめに雑誌誌面のデータ制作会社でエディトリアルデザイン、
次に広告会社においてチラシ・パンフレットなど紙媒体のデザインやを経験した後
同社においてWEB担当者として
はじめてWEBデザインの仕事に関わるようになりました

なので、今もWEBデザインだけではなく
紙媒体のデザインはもちろん
ロゴマークや看板など幅広くデザインに関わらせていただいております。

ちょっと変わった仕事では
クリエイター仲間からの依頼で
葬儀の記録撮影をカメラマンとして手伝ったこともあります。
貸していただいたカメラが高価なこともありますが
静粛な独特の雰囲気に
かなり緊張した覚えがあります。

そのほかでは
会社員時代にTV番組のサブカメラマンとしてロケに同行したこともあります。
慣れないこともあり、ロケ中 三脚からカメラを転げ落とし
現場を凍りつかせたのは苦い思い出です(笑)

もはや「WEBデザインと関係ないじゃん」なんて
ツッこまれてしまいそうですが
今後もお客様にとって
便利な「WEBデザイナー」としてがんばりたいと思います!

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

AIとは?│Web用語集

AIとは“Artificial Intelligence(アーティフィシャル インテリジェンス)”の略で、直訳すると「人工知能」という意味になる言葉です。

AIという言葉も、人工知能という言葉も、何となく耳にするけど意味をいまいち理解できていないという人も多いのではないでしょうか。
実はAI(人工知能)の定義は専門家の間でもまだ定まっておらず、「人工知能とは」「AIとは」と検索をかけても明確な答えは出てきません。

ざっくりとまとめてしまうと、人間の脳の役割を担うコンピュータといったところでしょうか。

AIについて詳しく知りたい方は以下をご覧ください。

目次

他のサイトでの説明
AI(人工知能)の種類とできること
復習クイズ

●他のサイトでの説明

今さら聞けない「AI・人工知能」とは? | AI専門ニュースメディア AINOW
https://ainow.ai/artificial-intelligence-3/
AIの専門メディアに掲載されているAIという言葉の解説ですが、やはり難しい内容になってしまいます。

人工知能(AI)の現状と未来 | 総務省
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/pdf/n4200000.pdf
総務省の資料「人工知能(AI)の現状と未来」の234ページに「国内の主な研究者による人工知能(AI)の定義」が掲載されていますが、人それぞれ定義が大きく異なることがよくわかります。

●AI(人工知能)の種類とできること

現在、AI(人工知能)でできることは以下のように分類できます。

・言語を判別できるAI(Webの翻訳サービスなど)

・音声を判別できるAI(Siri、Google Home、LINE clovaなど)

・画像を判別できるAI(Snowなどのカメラアプリ、Twitterのサムネイル生成機能、Google画像検索など)

・制御をおこなうAI(IoT家電、自動車の自動運転など)

・推論と最適化をおこなうAI(TVゲームなどのCPU操作、Web広告の表示など)

将来的にはこれらのひとつの技術に特化するのではなく、すべてを兼ね備えたAIの開発が目標とされています。すべてを兼ね備えたAIとは、人間と同等の知能を持つコンピュータということです。

逆にいえば現在はすべての機能を搭載したAIを開発する過程であり、その結果ひとつの技術に特化したAIが誕生しているといえます。

また、ひとつの技術に特化したAIのことは「特化型人工知能」と呼ばれ、「弱いAI」とも称されます。すべてを兼ね備えたAIは「汎用人工知能」といい、「強いAI」とも呼ばれます。

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

「画面内にくっついてくれたらいいんです」

みなさんこんにちは。むらたてつろうです。
お客様の意図を汲み取り間違えてしまったことで、大幅な追加作業をすることになってしまった話です。

私の仕事は、工程を管理するディレクターが窓口になっていいただく場合と、ディレクターとクライアント担当者の方とも確認しながら、っていうケースがあります。
ご紹介するのは後者のケースの時のことです。

新規サイト制作の納期まであと数日。
ページコーディングも終わり、担当者の方に表示の確認のメールを送ると
「少し違和感がある」の返信。
「ブラウザの右側にあるはずのスクロールバーが無くて、スクロールすると次のコンテンツがシュッと入って来るのは違和感を感じる」とのこと。

意図して制作した動作だったので、私は唖然としました。
「スクロールをしても画面内にコンテンツ(画像や文章)が収まるように作って」という要望だったので、スクロールバーを表示させずに、1スクロールで次のコンテンツに飛ぶようにしました。

ようやく終わりが見えてきたのに、テクニカルなことは不要だったのかなと不安になりました。
念のため担当者に直接お会いして確認をすると、
「普通にスクロールする通常の作り方で良かった」
さらに「難しいことは必要なくて、ただコンテンツが、画面内にくっついてくれたらいいんです」とのこと。

え!?
くっつく?

さらにさらに、「ノートパソコンで見ても、デスクトップの一般的なモニターで見ても、ウィンドウを小さくしてみても、くっついてくれたらいいんですよ」と。

混乱は加速しました。
まさに“くっつく”という動きが表現できた仕様だと思うけど…。
普通の作り方だと、自分のスクロールのさじ加減でコンテンツが表示されることになるけど…。
それでいいのかなあ…。

その後、“普通の作り方”に修正して、まずディレクターに見せたところ、
「これだとOKは出ないと思う。詰まり過ぎのコンテンツ間を大きく開けたほうがいい」とのこと。

もやもやしたままでしたが、
ディレクターの言う通りに変更して、担当者の方に送りました。
するとなんと、
「希望を反映してくれていてありがとう!」。

案件はすぅ~っと終わりを迎えたのです!
最初の段階でお客様の意図を汲み取れていなかったことで、自分で自分の首を絞めてしまったと反省した案件でした。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

ドライブレコーダーを買うか悩んだらスマホアプリから試してみよう

きっかけとなったのは今月に入って常磐道で起こったあおり運転の末の傷害事件。高速道路の真ん中に車を止めて道をさえぎり、犯人の運転手が怒鳴りながら現れ、被害者を殴りつける映像が何度もテレビのニュースやワイドショーで放送されました。

このショッキングな映像は被害者の車に設置されていたドライブレコーダーで録画されたもの。この映像が録画されていなかったら、もしかしたら犯人を特定することもできなかったかもしれません。今回の事件をきっかけに「自分の車にもドライブレコーダーを設置しようかな」と考えた人は多いのではないでしょうか。

私もまさにその一人なのですが、いざドライブレコーダーを買おうと思ってショッピングサイトを検索してみると、1000円程度の格安なものから5万円を超えるものまであり、何を買えばいいか悩んでしまいました。

その流れでおすすめのドライブレコーダーも調べようと思って検索してみると、どうやらドライブレコーダーを買う前にドライブレコーダー機能のあるスマホアプリを入れてみている人もいることを知りました。

スマホ端末のビデオ録画機能を利用しドライブレコーダーとして活用するというもので、実際にApp StoreやGoogle Playで「ドライブレコーダー」と検索してみると、驚くほどたくさんのアプリが出てきます。

 

これはこれでどのアプリが性能がいいのか調べるのが大変ですが、「Safety Sight」というアプリは保険会社の損保ジャパンが開発に携わっているようで、利用者も多いということがわかりました。

https://www.sjnk.jp/app_pc/safetysight/

損保ジャパンと契約していなくても無料で利用できるので早速ダウンロードしてみましたが、スマホホルダーなどを使って端末を固定しないと使えないものだったので、まだ実際に自分で試せていません。

ただYouTubeで探してみると、「試してみた」動画がたくさん公開されていたので、そちらを見れば操作感がわかるかと思います。

ほかにも、アプリを使わずに昔使っていたスマホ端末を社内に固定してドライブレコーダーとして活用しているという人もいるようです。高い買い物をする前にちょっと試してみたいという方はぜひ参考にしてみてください。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

profile〈オリカワシュウイチ〉

はじめまして。
「映画工房カルフのように」という映画団体を主宰している、オリカワシュウイチと申します。
自分たちでも作品を作る一方で、いろんな世代に向けて映画制作ワークショップを開催しています。
なぜこんなことをやっているのか、も含めて簡単にご紹介できればと思います。

* *

2001年5月のゴールデンウィークに、映画団体のホームページを作ろう、と考えました。
しかし、他の団体や個人のホームページを見てみると、これがすごい。
数々の受賞歴があったり、有名な映画監督の助手をしていたり。
賞も獲ってないし、有名人の知り合いもいなかった僕は、
恥ずかしい失敗ばかり繰り返している自分を恥じたのです。
・・・いや、逆転の発想で行こう!
そうやって当時、失敗談メインのホームページを完成させました。

その後、失敗談コンテンツだけを独立させたのがこちらです。
『超初心者のための映画制作講座』
http://eigalesson.com/
ちょっと時代を感じさせるデザインですよね。

* *

さて、ホームページを公開してから、
「映画作ってみたいんです。相談に乗って欲しい」と
何通もメールが来るようになっていきます。
戸惑いながらも、反応があることが嬉しくて一生懸命やり取りをしていました。
ただ、当時の僕は、ナニモノでもありません。
いろんな人の相談にのっているうち、だんだん面倒になってきました。
僕は自分の作品を作りたいのであって、人の世話がしたいんじゃない!

ある時、僕を頼って電話をくれた人に、「もう電話しないでくれ」と否定的な対応をしてしまったのです。
無理やり電話を切った瞬間、受話器の向こうの人が何か言おうとして息を吸い込んだのが聞こえました。
その必死な様子に、切った後の僕は深く考え込んでしまいました。

そもそも僕自身、映画を作り始めた頃、
藁にもすがるように情報を探していたのではなかったか。
何でもいいから教えて欲しい!少しでいいからアドバイスが欲しい!
と、会う人会う人に相談していたのではなかったか。

* *

その時から本気で、「どうやったら誰でもゼロから映画づくりが進められるか」を研究していったように思います。
やがて頼まれるままに『大人の映画学校』を始めました。
http://eigaschool.com/

気づけば16年が過ぎました。
開催地は関東だけでなく、関西、九州まで広がり、企業や学校、行政など様々なところからも依頼をいただくようになりました。
対象は、小学生から大学生、社会人からシニアまで、多岐に渡ります。
映画を作ってみたい人の最初の一歩をサポートしたい。
それが今の僕のポリシーです。

映画工房カルフのように
オリカワシュウイチ


http://karufu.net/

 

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

「とりあえず作って」はやめましょう

「とりあえず作って」

デザイナーにとって
お客様から放たれる恐怖の一言です。

内容が全然まとまっていない状況で
お客様側でデザインを先行して見たい場合や
時間が迫ってきているなど
理由は様々ですが
今までの経験上 こういったスタートだとうまくいかないケースが多いような気がします

基本的に私がデザインする際は
しっかりと打ち合わせをさせていただいて
落とし込む内容を聞き取ります。
そこからコンセプトを考え
内容に合わせてデザインするので
何もないところから「とりあえず作って」は非常に困ります。

内容が決まっていないのに
「〇〇〇とか△△△みたいなデザインでとりあえず作って」が厄介なんですね〜

最近 私が進めていた新規のWEB案件でのこと。
WEBテンプレートを使用しての案件で
テンプレートなのでデザインに制限はかかるが
コストを抑えながら早めの公開を目指すというものでした。

テンプレートのデザインでイメージが合っているということで
とりあえず おおまかなダミーの内容を落とし込みテストアップまで進めました。
そのあと、結局 お客様側で落とし込む内容をまとめていくうちに
デザインのイメージもどんどん変わってしまい
最終的にはテンプレートにも大幅なデザイン修正が入ったため
公開が予定よりも4〜5ヶ月 伸びてしまいました。
もちろんコストも追加になってしまったので
うまくいかなかったケースの1つです。

その他では
お客様が新規事業を始めるにあたってのWEB制作案件で
同じような業種のHPを何件か教えられ
「これと大体同じ内容でとりあえず作って、デザインが出来上がったものに対して修正入れるから…」と
そして
「この方が早いでしょ」
と一言

制作側にとっては、
その業種についても調べたりと大幅に作業負担が増えます。
その事業に関係のない人間が原稿を作るなど
間違いも増え効率も悪く制作側にとっては全然早くはないわけですね〜

納期などに追われてイラついているデザイナーの場合だと
「早まるのはおまえだけじゃー!!」
と言われかねないので注意しましょう(笑)

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

今ぺージを見ているけど何も変わってないよ…

みなさんこんにちは。むらたてつろうです。

企業でWEB担当をされている方のなかには、こんな経験をお持ちの方がいるのではないでしょうか?

自社サイトの更新を頼んだ制作会社から作業完了の報告を受けて、
見ると以前の内容のまま。
「今ページを見ているけど何も変わってないよ?」
と問い合わせると、
制作会社の担当から「キャッシュをクリアすれば変更が反映されます」と言われた。

そして言われた通りにブラウザからキャッシュを削除したらちゃんと更新されていた。

こんなやり取りの経験は、制作側の私にもあるのです。

なぜキャッシュを残しているのか

キャッシュは、一度アクセスしたサイトのデータをブラウザで一時的に保管してページの表示速度が上げる仕組みです。
キャッシュに保存する情報は、htmlやcss、Javascript、画像等のサイト表示に必要な情報です。
コンピュータは、サイトを閲覧する時はまず先に保存されたキャッシュ情報を読み込みます。
キャッシュの有効期限が切れていなければそのままページを表示するという流れとなります。

サーバーにアップされている情報を再度読み込まなくて良いので表示が早くなるという理屈です。

端末のデータ保存量が増えるというデメリットはありますが、通信環境が良くない場合はとくに便利な仕組みだと言えます。

キャッシュの有効期限は、1日~7日、長くて30日といった期間が一般的で、設定期間が過ぎると情報が削除されます。

ちなみに、キャッシュを残してしまっても、ブラウザのシークレットモードでページへアクセスすると、キャッシュ情報は使わないので最新のデータが表示されます。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像

アンカーとは?リンク との違い│Web用語集

アンカー(anchor)という言葉にはさまざまな意味があります。
Wikipediaで「アンカー」のページを開いてみると、実に多岐にわたる意味を持っている言葉だとわかります。

アンカー | Wikipedia

たくさんの意味を持つアンカーという言葉ですが、Webに関連している意味は主に以下のふたつです。

(1)
あるWebページから別のページに移動させる仕組みのことをアンカーと呼びます。
一般的には「リンク」と呼んでいますが、基本的には同義と思って間違いありません。そのため、別名で「アンカーリンク」とも呼びます。

また、Webページ上でリンクが設定されているテキスト(下線が引かれているテキスト)のことを「アンカーテキスト」といい、リンクを設定するために必要なHTMLタグのことを「アンカータグ」といいます。

(2)
Webページなどのデザインには欠かせないソフト「Adobe Illustrator」をはじめとするグラフィックソフトで曲線を描く際に指定する通過点や、動画などを回転させる際の中心点を「アンカーポイント」といいます。
この場合の「アンカー」とは船を海上に停めておく際に海の中に沈める「碇(いかり)」を意味します。

アンカーについて詳しく知りたい方は以下をご覧ください。

目次

他のサイトでの説明
「アンカー」と「リンク」の違い
復習クイズ

●他のサイトでの説明

「アンカー」とは?意味や使い方をご紹介 | コトバの意味辞典
https://word-dictionary.jp/posts/1928
「アンカー」という言葉が持つさまざまな意味の解説です。

アンカー (anchor)とは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
https://wa3.i-3-i.info/word1186.html
Webにおける「アンカー」の意味の解説です。

●「アンカー」と「リンク」の違い

クリックすると指定されたURLに移動されるという動きは「アンカー」も「リンク」も同じ。そのため基本的には同義と覚えて間違いありませんが、厳密には少しだけ違いがあります。

アンカー …… クリックすると別のWebページに移動する仕組みのこと

リンク …… クリックすると別のページに移動する仕組みのこと

つまり「アンカー」はWebに限定された仕組みであり、「リンク」はWeb以外も対象になります。
Webサイト上に設置された“別のページに移動する仕組み”のことは「アンカー」と呼んでも「リンク」と呼んでも問題ありませんが、例えばExcelでクリックすると別のシートに移動する仕組みを作った場合、それは「アンカー」とは呼びません。

また、厳密には「リンク」とは“何かと何かを繋いでいるもの”という意味になり、パソコンとスマートフォンを同期させたりすることもリンクと呼んだりします。コンピューター上での移動に限る場合は正しくは「ハイパーリンク」といいます。

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像