カテゴリー別アーカイブ: Design

画像イメージのサイズダウン(ImageOptim)

マック用の画像イメージのサイズダウンを行うソフト
ImageOptim(イメージオプティム)
圧縮設定は最初の画面下のアイコンで

1

非可逆圧縮を有効にするにチェック。
圧縮率を設定する(初期状態は80%)

2


 

サンプル jpeg 画像
人とバスを注意して見て

943KB  元

1000700_h1

177KB  80%品質(問題なく使用可能)

1000700_h2

93KB  40%品質(荒さが判断でき全体的に暗くなる)
実際の容量より1/10になったことを考えると素晴らしい。

1000700_h3


 

サンプル png 画像
右の白いっぽい葉を注意して見て

1500KB  元

1000700_f1

266KB  80%品質(問題なく使用可能)

1000700_f2

180KB  40%(荒さが判断できる)
同じ系統の色なので比較的使える

1000700_f3

マックバージョン:MacOS10.14.3

埋め込みGoogleMap の縮尺を変更する方法

まずGoogleMapで埋め込みタグを取得。
1、埋め込みたい地図を表示したら「共有」をクリック。
2、「地図を埋め込む」を表示。
3、埋め込みタグ(HTML)をコピー。
2018年 GoogleMapタグの取得

これで取得するタグは下記のような内容。
この羅列の中で「4f13.1」という表記を変更すると縮尺が変わります。

━━━━━━━━━━━━━━━━━━━━
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.426903155609!2d139.51303491525505!3d35.54315758022669!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f831781a0c4f%3A0x4225c0d743ccd56!2z44CSMjI3LTAwNjIg56We5aWI5bed55yM5qiq5rWc5biC6Z2S6JGJ5Yy66Z2S6JGJ5Y-w77yS5LiB55uu77yW4oiS77yR!5e0!3m2!1sja!2sjp!4v1544070708695″ width=”100%” height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
━━━━━━━━━━━━━━━━━━━━

「13.1」が尺度で、数値が小さいほどズームアップします。
1〜179の間で調節してみてください。

2018年 GoogleMap

デフォルト(「4f13.1」のまま)の表示

2018年 GoogleMap

1(「4f13.1」を「4f1」にする)の表示

2018年 GoogleMap

179(「4f13.1」を「4f179」にする)の表示

※この記事は2018年12月現在の内容です。GoogleMapの仕様変更により利用できなくなる場合もあります。ご了承ください。

フラットデザインに最適なカラーをアドバイス

最近多くなってきているフラットデザインで、ちょうどいい雰囲気のカラーを見つけるのに苦労していました。
普段は沢山の参考サイトをみて、気になった色をスポットカラーのようなもので色情報を調べ、制作しているサイトに入れてみて….と時間を掛けて調整しています。

今回紹介するのは、サクッとフラットデザインに最適なカラーをアドバイスしてくれるサイトです。あと、このサイトのファビコンがgifアニメーションになっていて「おぉ!色がランダムに動いている」こんなところにデザイナーの心意気を感じます。

使い方は簡単で気になった色を1クリックすると色情報をコピーしています。
それをHTML/CSSの色指定部分にペーストするだけです。

Flat UI Colors
http://flatuicolors.com/
flatui

Font Awesome アイコン

Version4.1になり新たに71アイコンが追加し合計439になりました。
HTMLの設定で簡単に設置できインターフェースユーザビリティにも、デザイン的にも最適です。
1番のメリットはレスポンシブwebデザインの制作方法になりサイズのことなるアイコン画像が必要ないということです。1つの設定でサイズ、色をCSSで調整可能です。

http://fortawesome.github.io/Font-Awesome/icons/

fontawesome fontawesome1

ウェブセーフカラー表

WindowsとMacintoshではカラーが違って見えたりします。またもともと標準としている色数や解像度による色数も違うのでネットではセーフカラー256色というものがあります。

この色を使っていると殆どの環境で同じ色で再現されます。フォトショップやドリームウィーバーなどは簡単に色指定ができますが、実際のブラウザで前後の濃淡など確認することができるサイトがあります。

さらに便利なのが右上のメニューから「216 Web Safe Colors」「Greens / Blues」「Reds / Blues」「Reds / Greens」「Earth Tones」「Pastels」「Greys」とそれぞれ選択してくれます。

http://websafecolors.info/