WEB制作

WEB制作

SNS運営はブログのアクセスアップに貢献するのかしないのか

安易なブログのアクセスアップ手段として、企業などのオウンドメディア(平たく言うとブログのことね)がよくやるのがツイッターやフェイスブックページなどのSNSに「ブログ更新しました」的な投稿をすること。

これは実際のところ、有効なアクセスアップ手段になり得るのか? その手法は個人ブログでも同じ理屈で通用するのか? というのを肌感覚的に某大手企業でWeb担当をしていた筆者が上から目線で解説したい。

結論 有効な場合もあれば逆効果の場合もある

全く金がかからないし、ツイッターの投稿するくらい事務員とか一般人でも出来るので、費用対効果的にホームラン級なんじゃね? って思いがちだけど、企業のSNSとかで「ブログ更新しました」の投稿をすると確かにアクセスは魅力的な記事なら少し増えるものの、99.5%の人にはウザがられる。

普段からフォロワーとかとちゃんとコミュニケーションしているなまだしも、bot的に「ブログ更新しました」ばっかり投稿しているアカウントは、もはや存在意義の欠片もないと言える。

しかし、驚いたことに大手企業のSNSアカウントとかでも「ブログ更新しました」が投稿のほとんどということが割と多かったりする。これだとWeb上にゴミを生み出していることになりかねないので、ユーザーからヘイトが溜まっていることになってしまう。

とは言っても、なぜそんなゴミみたいな投稿をする企業サイトが多いかというと、上から指示されて下っ端のWeb担当とか事務員とかが脳死状態で投稿しているからだ。上に逆らって首になって給料が貰えなくなるよりは、ゴミ投稿をした方が遥かにメリットがあるのだ。

個人ブログの場合は割に合わないことが多い

フォロワーがいっぱいいて、なおかつコミュニケーションもちゃんとしている場合、ここぞという時にフォロワーが求めているであろう投稿をお知らせするという使い方なら花丸(笑)だろう。

そうじゃなくて、普段ロクに投稿するネタがないからという理由で「ブログ投稿しました」をSNSに投稿するのはゴミ投稿でしかない。

この手のSNSアカウントはフォロワーも当然だけど幽霊フォロワーみたいなのばっかりなので、「ブログ投稿しました」と言っても反応がほとんどないのが通例。

たまにハッシュタグ経由でリツイートされたりした時にアクセスが増える程度だけど、そんなのは有用な記事を書いていれば勝手にSNSで紹介してくれるものなので、自ら投稿するほどのことではなかったりする。

結論、大した意味ないし、アクセスアップ用のアカウントの維持、管理は面倒だから、割に合わないことが多い。

WEB制作

【汗】Photoshopの『画像解像度』でpixel(ピクセル)が選べない時の対処法

Photoshopで画像解像度を変更しようとした時、なぜかcmとかinchとかのマニアック(?)な単位しか選べず、pixel(ピクセル)で変更できない時の解決法を紹介します。

答えは『画像の再サンプル』にチェックを入れる

バージョンやOSによって多少表示は違う可能性があるものの、下の方にある『画像の再サンプル』にチェックを入れるだけ。

後学のために理屈をさらっと教えると、Photoshopは主にWeb用などの画面表示用の用途で使われる場合と、DTPなどの商業印刷用途で使われる場合がある。

前者はWebデザイナーとか趣味で写真やってる人とかがよくやる操作。画像が持つpixcel数をいじることで、画像自体の情報を減らしたりする操作である。印刷の場合はcmとかinchを変更することで、ピクセル数自体は変わらないという、Webデザイナーからしたらパッとイメージできない操作である。逆に印刷関係の人からしたら、ごく当たり前の操作なのだろうと思う。

このチェックボックスはPhotoshopに慣れている人でも頻繁に操作しないから存在を忘れてしまいやすい。たまに違うPCで作業したり、何かの拍子でチェックがはずれていると「あれ?」ってなって、必死に環境設定とか確認したりするw

覚えておくといつか役に立つかも。というか、ここはツールチップとかでヒント出て欲しいけど。

WEB制作

【Webデザイナー向け】ATOMをDreamWeaverっぽくするカスタマイズ、パッケージのメモ

DW派の人の代替アプリは100歩譲ってATOMがオススメねぷ

2021年現在、Web制作つまりHTMLやCSSなどのコーディングで最強の神エディタと言えばDream Weaverの一択だ。

ところが、大手企業のAdobe社が開発している有料製品であるがゆえ、神エディタにも関わらず、経費削減をする中小企業や半端な大手企業、意味不明なオープンソース信仰派が牛耳っている職場だと大した金額でもないのにDream Weaverを契約してくれない場合もある。

企業は利益を追求する集団なので経費削減は100歩譲って理解できるとしても、大昔のイメージから「Dream Weaverは初心者向き」というような現実から目を背けるバカの一つ覚えのような発言をする意識高い系のエンジニアとかもいるので、いかんともしがたい。

今回はそんな背景の中、Dream Weaver派だったあなたが代わりのエディタとしてATOMを使う場合に、できるだけDreamWeverの使い勝手を再現できる設定を考えて行こうと思う。

無料エディタでもATOMなわけ

HTMLがいじれるようなエディタは有名どころだとVisual Studio Codeとかもあるが、なんでATOMかというと筆者が多少は触ったことがあるし、比較的歴史があって使っている人が多いから。

せっかく使い方を覚えてもすぐに開発終了したり、コロコロとバージョンアップで使い勝手が変わるようでは困る。その点、ATONは4~5年くらいの間、バージョンアップしても使い勝手は変わらないし安定している。

そして何といってもDream Weaverを目の敵にしているような無駄に意識高い系のコーダーやエンジニアにも使っている人が多いので、その手の連中に小言を言われたりもしないので快適。

ATOMはカスタマイズしまくらないとならない

そんな意識高い系にも使われているATOMだが、インストールしただけで快適な設定が出来上がっているDream Weaverとは違い、ATOMはインストール直後はゴミなので自分で「パッケージ」と呼ばれる拡張機能をインストールしてカスタマイズするのが必須。

パッケージは無料で公開されていてATOMの設定メニューからインストールすることができる。他の同類のエディタもこういった仕組みが採用されている。

DW化するためのパッケージ

結論から言うとパッケージを入れまくっても所詮は別のアプリ、完全にDream Weaverと同じ使い勝手にすることはできない。

自称意識高い系の人たちが使うエディタと比べてDream Weaverの便利なところと言えば、リアルタイムでコーディングしながら結果をプレビューしたり、プレビュー画面の要素を選択して効率的にコーディングできることである。紐づいているCSSは一覧でタブに表示され、レスポンシブもデバイスごとに幅を確認しながら直感的に作っていくことができる。

本当はこういった部分もDW化できれば良かったのだが、ATOM自体も意識高い系が使うエディタなので完全に再現することはできない。それでも少しでもDreaWeaverに近づけるための慰めのようなパッケージを紹介する。

インストールするにはATOMの設定からインストールというような項目を出してパッケージ名をコピペで検索すればOKだ。

autoclose-html

Drea Weaverでは当たり前だが、自動で閉じタグが入力されるパッケージ。Dream Weaverでは何もしないでも出来ることだけどね。初期設定だと少し挙動が違うので、自力でカスタマイズは必要。

atom-beautify

HTMLやCSSの整形に使う。DWと同じにはならない。

BrowserPlus

結果をブラウザっぽい画面でプレビューしながらコーディングできる。

Color Picker

カラーピッカー。とりあえず、これくらいは入ってないと・・・。

css-spy

そのhtmlファイルで使っているcssクラスとかを視覚的にわかりやすくするやつ、だった気がする。

Highlight Selected

初期状態だと選択している場所がわかりにくいので見やすくするパッケージ。

Japanese Menu

日本語が母国語の人向けにメニューなどを日本語化する。

open-in-browsers

モノホンのブラウザでのチェックをしやすくする。

とりあえず、これくらいかな

Creative Cloudのコンプリート版を契約していればいいけど、エンジニア系のマネージャーが取り仕切っている部署とかだと、エディターはフリーのを使えの一点張りでどうしようもない。

状況によるけど、面接とかで上司が何畑の人かは確認しておいた方がいいよ。