Photoshopでスピード感・躍動感をプラス!

201603_00

いよいよ今日で3月も終わりですね。
全国では桜が咲き始めていて、新潟でも開花が待ち遠しい今日この頃です。

さて、今回はPhotoshopの小ネタのご紹介。

先日のとあるデザイン案件で、スピード感のあるイメージを出したいものがあったのですが、その時にしたPhotoshopの加工をメモがわりに残していこうと思います。

サンプルとして、今回使用するのはこちらの写真。

201603_01


『チョット役立つ』情報サービス

どうも、Kazです。
年度末でバタバタしている方が多いかと思います。
イロイロな情報をかき集め、クラウアント様や社内企画として提出や発表をする事が多いと思いますが
そんな中、情報源として『ちょっと役立つ』サービスを紹介致します。

【総務省 – 情報通信白書】

KAZ_somusyo

[LINK] 総務省
[LINK] 総務省 情報通信白書
※クリエイティブコモンズライセンスの設定がありますので、使用前に確認して下さい。

総務省が公開している情報ですので、信頼性は充分にあります。
しかもライセンスの規定を守れば使用してOKと言う事で、企画書や報告書などで便利に使える情報です。

【StatCounter】

KAZ_tatcounter

[LINK] StatCounter

ブラウザのシェアはWEBを制作する側にとっても気になる事。
こちらのサイトでは、全世界から各国まで最新のブラウザシェアが表示されています。
また、ありがたい事にイメージやCSV、HTMLへの組み込みタグまでよういされていますので使い勝手も十分です。

【yourbrowser.is】

KAZ_yourbrowser

[LINK] yourbrowser.is
※レポートが迷惑メール扱いになりやすいので注意して下さい。

ちょっと変化球で、クライアント様がどんな環境で見ているか気になりませんか?
それを確認できるのが「yourbrowser.is」です。
クライアント様にアクセスして頂き『Have this report emailed to: 』へコチラ側のメールアドレスを入れて[send]して頂くとレポートとして送信されます。
このレポートが、結構こまかくてSNSのログイン状況や広告ブロックを行っているかまで確認できます。

いかがでしょうか、他にも情報源として使えるサイトがあると思いますが
ライセンスに気を付けてご利用ください。


Simplenoteを使ってみてる(Markdownの練習を兼ねて)

この記事はSimplenoteのブラウザ版を使って下書きしています。 Githubもやってかなきゃだし、Web業界にいたりすると、どうもいい加減Markdown記法に慣れていかなくちゃなって思っていたのです。
以前一度かじったのですが、なんだか続かなかった経験があって、ちょっと挫折感があったのです。
あの時は、いまいち使いやすいエディタに巡り合わなかった、っていうのが敗因だと思っています。
そこで最近使い始めたのが今更ながらSimplenoteです。

blog160330

良いところ

  • モバイルアプリが使いやすい
  • Markdownが使える
  • パブリッシュ機能が便利
  • ブラウザで使える
  • Evernoteより軽い
  • 自動保存
  • 更新の履歴がわかる(戻れる)

今一つなところ

  • クラス名、IDが付与できない
  • 定義リストが使えない(Markdown使用時)
  • ログイン画面(間違うとユーザー名から)

Simplenoteって?

スクリーンショット(2016-03-30 18.04.39)

 

Simplenote は簡単にメモやリスト、アイディアなどを書き留められるツールです。無料で、お持ちのデバイスすべてのノートを同期できます。 Simplenote ではスピードと効率を最も重視しています。アプリを開き、書き込むだけ。ノートがたくさん集まってきたら、検索したりタグやピン留めで整理したりもできます。
Google Play の Android アプリ Simplenoteより

とてもざっくり説明すると、Evernoteのテキスト専用機みたいなイメージです。
書いたそばから自動保存してくれ、異なるデバイス間でも同期してくれます。

Evernoteとの違い

  • 画像やファイルの保存はできません
  • テキストの装飾はできません(リッチテキストが使えない)
  • Markdownが使えます
  • Notebookがない(基本的にタグ管理のみ)
  • 動作が軽い

Evernoteを使う場合は、Cloudに保存、みたいな意識にのときが多いですかね。
Evernoteと比較すると、とにかくプレーンなテキストを書くことに特化しているので、Evernoteとはそもそものアプリの趣旨が違うと思います。(自ずと利用する目的が変わる)
ただテキストという面で考えても、EvernoteのNotebook機能は便利なのでこれがないのはちょっと残念。タグだけで管理する感じが、ブログの機能として考えたときにTumblrにカテゴリがないのとちょっと雰囲気が似ているかもしれません。 リッチテキストが使えない点はMarkdownで書けるので、そんなに気になりませんでした。

 

WordPressの下書きに使う

Markdownで書くことのできるブログも増えてきました。前述のTumblrもそうですし、はてなもそうですね。
仕事でも良く使うWordpressの場合はデフォルトではMarkdownで記事を書くことができません。
※プラグインを導入すればできます。(Jetpack、JP Markdownなど)
プラグインを導入していない場合でも、Simplenoteを使ってMarkdownで下書きを作った場合、プレビュー画面をコピーしてビジュアルエディタにに貼付ければOKです!
Wordで原稿作っている人には同じような感じですね!(Markdown書く人でWord使って下書きする人っているのかな?)

Markdownで書く場合はHTMLを直接書いてもOKみたいです。ちょっと感覚的に違和感はありますが。
ですがこの方法でHTMLを貼付けても、プレビュー画面でTwitterの埋め込みはできていませんでした。同様にiframeもダメでしたので、scriptやこういった特殊な埋め込みはできないみたいです。(HTMLが文字列としてそのまま出力される)
こういったものに関しては、WordPress側で挿入した方が良さそうです。
また画像の挿入などもMarkdownで書くことはできますが、WordPress上でアップロードしてそのまま挿入した方が簡単ですね。
Simplenoteは、あくまで文章の作成に使うのが良さそうです。

ブラウザ版のちょっと残念なところ・いいところ

ブラウザ版を使っていてちょっと残念に感じてる点は、すごい細かいとこなんですけどログイン画面でユーザー名(メールアドレス)とパスワードを入力する時に、パスワードを間違うと、もう一度ユーザー名から入力しなきゃいけないところですかね。
自分でもログイン画面作ったりしますが、こういう時はユーザー名は消さずにパスワードだけ再入力する方が好みです。
逆にそういうところくらいですかね、ちょっと不満なのは。 IDやクラスが使えないという点は、IDやクラスが必要なくらいHTMLを書きたければHTMLを書くためのものを使えばいいし、定義リストが使えないのはMarkdownエディタでは良くあることのようです。
見た目もシンプルでいいし、動作も軽いのでかなり気に入って使っています。

ブラウザ版のスクリーンショット
ブラウザ版のスクリーンショット、本当シンプル

 

コーディングしたりする仕事柄、Webブラウザは常時立ち上がっていることが多いので、わざわざアプリケーションを立ち上げずに作業に入れるとこもお気に入りです。モバイルアプリもあるので、スマホで気になったネタをリスト書きしておいて、PCのキーボードで一気に文章にするっていうのがいい感じです。

ちょっとした便利機能だと思う

これは2点あって、「履歴が見られる(戻れる)」点と「パブリッシュ機能」が優秀ってことです。
自動保存なんで過去ファイルなんてものがないので、前の方が良かったなぁって言うときに戻れないとちょっと大変なんですが、Simplenoteの場合は、上の時計アイコンから履歴を見ることができます。まだ試してないけど、「Restore」ボタン押すとその時まで戻ってくれそうです。

最近多用してるのが「パブリッシュ機能」です。
ノートを公開してURLを発行し、URLを知っている人だけノートを見られる機能です。
ここでMarkdownが力を発揮します。Markdownで書いて公開すると、ちゃんとHTMLで書いたWebページとして表示してくれます。
チーム内の簡単な打合せ事項や連絡事項なんかはこれで書いて、メールやチャットで共有すると楽でいいです。

こんな感じです(共有例)

スクリーンショット(2016-03-30 17.52.49)

その他にもSNSで共有したり、メールに変換して送ったりすることもできるみたいです。

Markdownを使うには

SimplenoteでMarkdownを使うのはとても簡単。インフォメーションアイコンをクリックすると「Markdown Formatted」というチェックボックスがあるので、これにチェックを入れるだけ!
ちなみにノートを新規で作ったばかりだと切替られないみたいなので、ちょっとだけ文章書いてから切り替えればOKです。

スクリーンショット(2016-03-30 17.52.29)

書いたMarkdownは上部の「Edit/Preview」のタブの切替でカクニンできます。

※インフォメーションで文字数のカクニンもできるので、文章量が必要な場合なんかにも便利ですね。

Markdownそのものの使い方は、この辺りを参考にしたらよさそうです。

ということでSimplenote、結構必須アイテムになりつつあります。 もし良かったらみなさんも使ってみてはいかがですか??


追記
共同編集する場合の方法を書きました。よかったらこちらもどうぞ!

Simplenoteを誰かと共有(ブラウザ版)


バスケットボールスピリッツvol.8発売

バスケ雑誌「バスケットボールスピリッツ」vol.8発売中!!

http://www.bbspirits.com/news/basketballspirits-vol8/


banner_BBS8_640_420url

お求めはオンラインショップ、またはAmazonで!!

Amazonでは電子書籍版も購入できます!!


便利なPDFの圧縮サービス

landing-start-hd

仕事でPDFデータのやり取りを行うことが多いと思います。
しかし、IllustratorやExcel、WordといったソフトからPDFに変換すると、
データ量が重くなってしまい、データのやり取りに困ることもあります。
圧縮しようとしても、手間が掛かるのでやりたくない。または、方法がわからない。
もっと簡単に圧縮でできないかと探していたら、
よさそうな外部サービスがあったので使ってみました。

Smallpdf というサービスです。
サイトURL:http://smallpdf.com/jp/compress-pdf

キャプチャ

PDFの圧縮や変換できるサービスで完全無料です。
海外のサイトですが、日本語対応しています。
使用方法も簡単で、PDFファイルをアップロードして、
圧縮されたPDFファイルをダウンロードするだけです。

その他にも

PPT PDF 変換
PDF PPT 変換
JPEG PDF 変換
PDF JPEG 変換
Excel PDF 変換
PDF Excel 変換
Word PDF 変換
PDF Word 変換
PDF 結合
PDF 分割
PDFを回転
PDF ロック解除
PDFを保護

が行えます。
※外部の無料サービスですので、ファイルのアップロードは、
各自の責任の下で行ってください。

では、実際にどれくらい圧縮されるか検証してみました。
対象ファイルはA4サイズのPDFです。

Illustratorから変換したPDFファイル 画像と文字

キャプチャ3

ファイルサイズ
圧縮前 1,352KB
圧縮後 84KB

ファイルサイズか大幅に圧縮されました。
PDFファイル内の画像が結構荒くなっています。
テキスト情報保持されていました。

 

 

Illustratorから変換したPDFファイル 文字のみ

キャプチャ4

ファイルサイズ
圧縮前 350KB
圧縮後 6KB

こちらもファイルサイズか大幅に圧縮されました。
どこを圧縮したのかわかりませんが、見た目に変わりはありませんでした。
テキスト情報保持されていました。

 

Excelから変換したPDFファイル 画像と文字

ファイルサイズ
圧縮前 188KB
圧縮後 68KB

Excelから変換したPDFファイル 文字のみ

ファイルサイズ
圧縮前 23KB
圧縮後 8KB

Excelから書き出したPDFファイルも少しですが圧縮されました。

 

画像の枚数や装飾によって圧縮率は変わると思います。
圧縮によって画質が低下するので、
鮮明な画像を必要としない場合はおすすめです。

 

その他の機能

Excel→PDFの変換サービスも使ってみました。
変換はできましたが何点か問題がありました。
・印刷範囲でPDF変換されない
・書体が変わってしまう

独自の仕様がありそうなので他のサービスは、
使用時に注意が必要そうです。