とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

2019年5月18日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年5月18日号です。

 

気になるニュース・動向

勉強・参考になる記事

 

 

note.mu

gigazine.net

www.orangeitems.com

blog.jnito.com

note.mu

creive.me

www.watch.impress.co.jp

logmi.jp

note.mu

www.businessinsider.jp

webtan.impress.co.jp

note.mu

www.sem-r.com

 

www.itmedia.co.jp

 

 

-------

 

以上です。

 

こんなかんじでIT・Web界隈の記事を

ツイッターでもシェアしたりリツイートしたりしてます。

よかったらフォローしていただけるとうれしいです。

 

2019年5月17日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年5月17日号です。

 

気になる動向・ニュース

勉強・参考になる記事

 

 

www.webcreatorbox.com

 

baigie.me

note.mu

www.huffingtonpost.jp

yasuhisa.com

note.mu

qiita.com

qiita.com

note.mu

kohkira.com

 

www.mdn.co.jp

 

-------

 

以上です。

 

こんなかんじでIT・Web界隈の記事を

ツイッターでもシェアしたりリツイートしたりしてます。

よかったらフォローしていただけるとうれしいです。

 

 

2019年5月16日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年5月16日号です。

 

目立った動きはとくになし、

それではまとめ、どうぞ。

 

ics.media

qiita.com

note.mu

 

 

weba11y.jp

book.mynavi.jp

careerhack.en-japan.com

note.mu

coliss.com

 

www.itmedia.co.jp

www.remove.bg

gigazine.net

note.mu

note.mu

www.itmedia.co.jp

www.watch.impress.co.jp

tech.appbrew.io

liginc.co.jp

liginc.co.jp

jp.techcrunch.com

c-u.co.jp 

qiita.com

www.gizmodo.jp

note.mu

note.mu

kyokuti.jp

note.mu

qiita.com

note.mu

goodpatch.com

photoshopvip.net

goworkship.com

jp.techcrunch.com

baigie.me

cakes.mu

note.mu

qiita.com

 

-------

 

以上です。

 

こんなかんじでIT・Web界隈の記事を

ツイッターでもシェアしたりリツイートしたりしてます。

よかったらフォローしていただけるとうれしいです。

 

2019年5月15日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年5月15日号です。

 

気になる動向・ニュース

 

それではまとめ、どうぞ!

 

www3.nhk.or.jp

qiita.com

ecnomikata.com

qiita.com

uxmilk.jp

srad.jp

japanese.engadget.com

 

nlab.itmedia.co.jp

note.mu

qiita.com

seleck.cc

note.mu

qiita.com

www.suzukikenichi.com

www.itmedia.co.jp

www.itmedia.co.jp

goworkship.com

 

 

diamond.jp

www.gizmodo.jp

note.mu

 

www.nikkei.com

www.mdn.co.jp

nlab.itmedia.co.jp

kachibito.net

coliss.com

www.itmedia.co.jp

tech.nikkeibp.co.jp

 

-------

 

以上です。

 

こんなかんじでIT・Web界隈の記事を

ツイッターでもシェアしたりリツイートしたりしてます。

よかったらフォローしていただけるとうれしいです。

 

有益で鮮度が高い情報が満載の CSS Nite はベスト・セッションで過去のセミナーの音声やスライド資料が見れる。最&高。

有益で鮮度が高い情報が満載の CSS Nite はベスト・セッションで過去のセミナーの音声やスライド資料が見れる。最&高。

CSS Niteは

Web製作に関するセミナーです。

Web製作に関わっている人間であれば

知らないひとはいないんじゃないでしょうか。

(ちなみにアイキャッチの画像はCSS Niteの様子ではありませんあしからず...)

 

有益なセミナーが全国各地で行われています。

cssnite.jp

 

CSS Niteにかかわらず、

各地で有益なセミナー、イベント、勉強会などが

開催されていますよね。

 

行きたいけど遠方だし行けないという

こともあるでしょうし、

なかなか時間がとれずに行けないなど

足が運べない方も多いハズ。

 

ちなみに僕は、セミナーやイベント系には

ほとんど行きません。

数回行ったことがありますが、

行くメリットと

行かなくていいメリットを

天秤にかけたときに、

行かなくて「も」いいと思ったので、

あまりいくことはないです。

 

よっぽど聞きたい場合は

行くと思いますが、出不精なもんで。

 

セミナー行く行かないの話は下記の

記事で書いています。

www.toaru.jp

僕は行かないですが、

初学者のひとは、何回か行ってみることを

おすすめしますし、

初学者でなくても積極的に参加すると

鮮度の高い情報や、セミナーでしか聞けない

話などがいろいろ消えて勉強になると思います。

 

さて上記の記事にも書いたのですが、

人気のあるセミナーやイベントは、

いろいろな人が記事で感想をあげてくれたり、

ツイートで有益な情報をシェアしてくれることが

多いです。

 

現地に行かなくてもある程度有益な

情報は流れてくるんですね。

 

CSS Niteの場合は、

ベストセッションとして、公式に

過去のセミナーの音声・スライドデータを

公開してくれています。

 

めちゃくちゃありがたい。

太っ腹です。お金払ってもいいくらいですね。

最&高です。

 

それがこちらのページになります。

cssnite.jp

2010年からベストセッションとして、

厳選されたすばらしいセッションたち。

 

CSS Niteでは、ほとんどのセッションのスライドや音声を公開しています(無料版はすぐに、有料版は少し時間をおいてから)。参加した方だけのものにしておくのはもったいないので、これを機会にぜひチェックしてみてください。

また、やっぱりリアルタイムで生で聞くのがベストだと思いますので、ぜひ、リアルなセミナーイベントにもご参加ください。

 

いやー尊いですね。

 

ということでセミナーやイベントに

行かずとも有益な情報がゲットできる

というわけで CSS Niteベストセッション、

おすすめです。

 

これがあるから行かなくてもいんじゃないか、と

思ってしまうひとつの理由だったりもしますが。 

 

overflow-y:scroll で横スクロールはさせたいけどスクロールバーを出したくない場合の対処法

overflow-y:scroll で横スクロールはさせたいけどスクロールバー出したくない場合の対処法

スマホサイトでは

スワイプして横スクロールで

コンテンツを見せたり、

ナビゲーション操作させたりと

横スクロールは省スペースで

コンテンツを展開するUIとして

優秀なUIです。

 

横スクロールの実装は、

CSSで簡単にできます。

 

overflow-y:scroll;

 

ですね。詳しくは下記のサイトを

ご覧ください。

saruwakakun.com

さて「overflow-y:scroll」にしたときに

問題になるのが、PCでのスクロールバーです。

 

mac OS であればスクロールバーが

初期設定では非表示になるので、

デザイン上とくに違和感がありませんが、

windowsはスクロールバーが露骨にでます。

 

「overflow-y:scroll」をかけると、

Windowsではどのブラウザでも

このようにスクロールバーがでます。

 

Windowsで例を見てみましょう。

AppleのWebサイトを

ブラウザ幅を縮めて見ると、

ナビゲーションが横スクロール

できるようになります。

 

ではここで少し小細工を。

Appleはスクロールバーが

でない状態で横スクロールが

できるように実装上で

ある工夫がされています。

 

いったんその工夫された実装を

とってみてみましょう。

こんなかんじです。

 

ナビゲーションでスクロールバーがでてしまう例

ナビゲーションでスクロールバーがでてしまう例

 

スクロールバーがでました。

 

Appleはとある手法を使って、

「overflow-y:scroll」を使いながら

Windowsでスクロールバーを表示しない

という実装をしています。

 

その実装方法とは、

なんとめちゃくちゃ単純。

 

スクロールバーの部分を隠しちゃおう

ということなんです。

 

隠す方法はまずナビゲーションの

横スクロールする要素(子要素)に、

親要素を作ります。

親要素に「overflow-y:hidden」をかけて

はみだす部分を見えないようにします。

 

その見えない部分に子要素の

スクロールバーを追いやるのです。

 

具体的には子要素に

padding-bottomで49pxをかけて

外に追いやっています。

 

子要素のスクロールバーを外に追いやっている

子要素のスクロールバーを外に追いやっている

 

これはめちゃくちゃかしこいですね。

簡単すぎて盲点でした。

 

以上、

「overflow-y:scroll」で横スクロールさせたいけど、

スクロールバーを出したくない場合の対処法は、

スクロールバーを親要素の外に追い出す、でした。

 

 

広告バナーには規格がある!2カラムのWebサイトのサイドカラムの幅は広告バナーサイズを基準にするといい

広告バナーには規格がある!2カラムのWebサイトのサイドカラムの幅は広告バナーサイズを基準にするといい

モバイルファーストな世の中ですが、

今日はPCサイト寄りの話。

 

モバイルファーストとはいえど、

モバイルサイトのデザインオンリーで

考えるクライアントはまだまだ少ないです。

 

モバイルファーストだけど

PCサイトもしっかり構築する、

というかんじ。

 

スマートフォンの利用がPCを上回る

という調査結果もでているとおり、

スマートフォンの利用がPCを上回る、総務省調査 - BCN+R

 

今はおそらく6割7割がスマホでのアクセスに

なってきているので、

そのサイトのコンテンツの特性にもよりますが

そう遠くない未来に、PCサイトは

スマホサイトそのまま見せるかたちの

サイトが増えてくるかもしれません。

コスト面でいうとそのほうが合理的ですしね。

 

本題です。

PCサイトのレイアウトについて。

どんなWebサイトにもだいたいあるのが「バナー」。

広告バナーやコンテンツを訴求するバナーは

だいたいありますよね。

 

特に広告バナーですが、

広告のバナーは

国際標準規格としてサイズが

規定されています。

http://web-directors.net/modules/pico/index.php?content_id=87

 

規格外でもとくにペナルティはないし、

任意のサイズで問題はありませんが、

ほとんどのWebサイトは

国際標準規格を準拠していると思います。

 

Googleアドセンスで配信できる広告も

国際標準規格サイズのものです。

効果的な広告サイズ - AdSense ヘルプ

 

国際標準規格として定められているサイズには

やはり意味があって、視認性や認識性が高く

効果がでやすいサイズだということです。

 

ほとんどのWebサイトが準拠しているので、

バナーのサイズは慣習的にユーザが

見慣れているものです。

 

2カラムのWebサイトで

よく見かけるのは、

横幅300pxの正方形のバナー。

 

2カラムのWebサイトの場合、

クライアントがWebサイトを

運用していく中で、

広告掲載をするかもしれないので、

広告が掲載されても破綻しない

レイアウトにしておく必要があります。

 

その場合、サイドカラムの幅は、

国際標準規格で規定されたバナーが

表示できる幅、ということになるので、

これをひとつの基準とするのがよいと

おもいます。

 

だいたい広告が入るPCサイトでは

サイドカラムは

300pxあたりになっている

のはそういうことです。

 

販売戦略のとき意識したいマーケティングの4P。Product、Price、Promotion、Place、どこを攻めるのか考えよう。

販売戦略のとき意識したいマーケティングの4P。Product、Price、Promotion、Place、どこを攻めるのか考えよう。

マーケティングの4Pとは

  1. Product(製品・商品)
  2. Price(価格)
  3. Promotion(宣伝)
  4. Place(販売チャネル)

です。

 

販売戦略に重要な考えで、

どのチャネルを攻略していくか

という指標になります。

 

https://www.bizocean.jp/doc/howto/153/

4P分析とは、どんな製品(Product)を、いくら(Price)で、どこで(Place)どのように(Promotion)して売るかといったマーケティングにおける4つの視点を組み合わせた企業戦略を策定するための分析手法です。

 

自社の商品やサービスを売るとします。

その場合、4つのチャネルの中で、

どれに問題があるのか考えます。

 

商品やサービスのクオリティがよくて

価格もリーズナブルだけど、いまいち

売上が伸びない。

その場合は、Promotion(プロモーション)が

不足しています。

 

ではそのPromotion(プロモーション)をどこで

するべきかというのがPlace(流通)になります。

 

Placeは、Webなのかリアル店舗なのか、

WebだけどSNSでやるのか、自社サイトで

やるのか、その他のプラットフォームで

やるのか。

 

逆に商品にあまり魅力がない場合。

これは売るのはなかなかむずかしいですが、

4P分析でいくと、たとえば

Price(価格)をめちゃくちゃ安くすれば

売れるかもしれない。

 

広告費をめちゃくちゃかけて

Promotion(プロモーション)すれば

認知度が上がって購入者が増えるかもしれない。

 

といった具合に4Pで何が足りないか、

何を補っていく必要があるのかを考えると

販売戦略が見えてきます。

 

  1. Product(製品・商品)
  2. Price(価格)
  3. Promotion(宣伝・プロモーション)
  4. Place(販売チャネル・流通)

 

4Pは上から順に重要度が高い順になっています。

商品力があれば、価格が高くても売りやすい。

商品力が弱ければ価格を安くすれば売りやすい。

商品力、価格に魅力がなければ宣伝力をあげればいい。

販売するチャネルは、どこを市場として

攻めるかを考えればいい。

 

4Pに関しては以前CSS Niteで

高畑さんが登壇された際に

話していた内容が

めちゃくちゃ参考に

なりますのでぜひ聞いてみてください。

音声聞きながらスライドを見てもらうと

理解が深まると思います。

 

スライド

https://cssnite-sapporo.jp/docs/vol4/CSSNiteSapporo4-s7-takahata.pdf

音声

https://cssnite-sapporo.jp/themes/cssnite201207/docs/vol4/CSSNiteSapporo4-s7-takahata.mp3

 

cssnite-sapporo.jp

 

2019年5月14日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、

IT業界・Web界隈の気になる記事まとめ、

2019年5月14日号です。

 

ボリュームなかなかです。

いろいろ動きがありました!

チェックしておきましょう!

 

気になる動向・ニュース

 

勉強・参考になる記事

 

それでは、まとめどうぞ!

 

japan.cnet.com

qiita.com

choimake.com

note.mu

sp.pictlink.com

note.mu

www.gizmodo.jp

gigazine.net

note.mu

webtan.impress.co.jp

qiita.com

www.itmedia.co.jp

stocker.jp

qiita.com

note.mu

yasuhisa.com

www.itmedia.co.jp

www3.nhk.or.jp

nanaki.design

tamukai.blog.velc.jp

c-u.co.jp

note.mu

techblog.zozo.com

jp.techcrunch.com

dev.classmethod.jp

rework.withgoogle.com

liginc.co.jp

 

nabeharu.hatenablog.com

 

 

-------

 

以上です。

 

こんなかんじでIT・Web界隈の記事を

ツイッターでもシェアしたりリツイートしたりしてます。

よかったらフォローしていただけるとうれしいです。

 

全国展開のWebサイトにおける地域の分け方(エリア、都道府県の区分)

全国展開のWebサイトにおける地域の分け方(エリア、都道府県の区分)

全国規模での

コンテンツを取り扱う

Webサイトでは必ず地域での

セグメントがあります。

 

コンテンツの検索や、

ぐるなびや食べログ、

不動産のWebサイトのように

入口が地域で分かれていたりします。

 

ユーザ視点ではあまり意識することは

ないかもしれませんが、

サイトの実装側としては意識しないと

いけません。

 

どういう区分けにするかは、

サイトごとに違います。

どういうことかというと例えば

いくつか例を見てみましょう。

PCサイトですが、エリアの区分けの部分を

キャプチャしました。

 

ぐるなびの地域の分け方

ぐるなびの地域の分け方

 

食べログの地域の分け方

食べログの地域の分け方

スーモの地域の分け方

スーモの地域の分け方

アパマンショップの地域の分け方

アパマンショップの地域の分け方

ライフルホームズの地域の分け方

ライフルホームズの地域の分け方

タイムズの地域の分け方

タイムズの地域の分け方

カーセンサーnetの地域の分け方

カーセンサーnetの地域の分け方

e+(イープラス)の地域の分け方

e+(イープラス)の地域の分け方

というかんじでサイトごとに

地域の区分けが異なります。

特に決まりはないので、

サイトごとに違うことに関しては

なんの問題もありません。

 

Webサイトの実装時に

しっかりとクライアントと

すり合わせしておく必要がある

というくらいですかね。

 

ちなみに、

気象警報・注意報や天気予報は、

地域の区分けが決まっています。

気象庁 | 気象警報・注意報や天気予報の発表区域

 

独自のコンテンツを

取り扱う場合は、自分らの采配で

エリアの区分けを決めて問題ありません。

競合サイトがどのような区分けをしているか、

などは調べてみるとよいでしょう。

 

関東とは別に、

「首都圏」として区分けするパターンもあり、

コンテンツの特性上、

首都圏ユーザが多い場合には

有効な区分けの仕方だったりします。

 

クライアントに「首都圏」という

くくりを提案するのもありです。