ブラウザで表示している画像を中央揃えにするブックマークレット

画像 真ん中 ブックマークレット

こんにちは!YOUKNOWです。

デザインカンプを完成させ、いざ書き出してみてブラウザに画像を表示させた時にこれじゃない…って思うときが多々あります。

なんでや…Photoshopで完璧に調整したのに…

このように(?)Photoshop上で見ている時のデザインとブラウザで見た時のデザインの印象がどうしても違ってるように見える病にかかっている人は多いんじゃないでしょうか。
(長いから病名決めよう)

僕はその病気の重症患者なので、デザインの微調整を行うときはブラウザで確認して、Photoshopに戻ってまた修正みたいな事を繰り返しながらデザインをブラッシュアップさせます。

画像 真ん中 ブックマークレット

しかし!Photoshopから書きだした画像をブラウザにそのまま放り込むと、画像が左端によってしまっていて実際のイメージ感がつかめません。

その問題を解消するために、ブラウザで表示している画像を中央揃えにするブックマークレットを作りました。(長い)

ブラウザの画像を真ん中にするブックマークレット

ブラウザデザイン確認用

この上のリンクをブックマークに登録して下さい。

後は中央寄せにしたい画像をブラウザに読み込ませて、ブックマークレットをクリックすればOKです。

画像 真ん中 ブックマークレット

使用した感じはこのような感じになります。

最後の微調整はブラウザで見ながらやるとより良い調整が出来ますので、ぜひご利用下さい!

スマホサイトを印刷するには「Print1」が便利!

縦長 画像 印刷 Print1

こんにちは!YOUKNOWです。

デザイン修正指示を出すときや、プレゼンする際等にWEBサイトをプリントする機会は多いと思います。
自分の場合、言葉だけの修正指示だと修正箇所を見落とす原因になりがちなので、最近はプリントアウトして赤ペンでマークしてから修正を行うようにしています。

しかしWEBサイトのデザインってすっごい縦長なんですよね…。最近作った中で長かったなぁと思ったサイズは横640px×縦14870px….!!
特にスマホサイトなんかはどうしても縦長になりやすいです。

ただ、縦長の画像をふつーに印刷しようとすると問題があるんですよね。
その問題が何かというと…

スマホサイト 印刷 Print1

こうなってしまうんですよね…。縮小して一枚におさめてくれるので詳細が全くわからなくなってしまいます。
スマホサイトやLP(ランディングページ)を印刷するのも困ってしまいます。

今回はその縦長になった画像を一枚の紙に配置してくれるWEBサービス「Print1」をご紹介します。

Print1とは

縦長の画像を1枚の紙に自動でレイアウトしてくれ、印刷まで出来る素敵すぎるサービス。
特にWEBデザインにありがちな、縦が異様に長い画像を印刷する際に絶大な効果を発揮します。

スマホサイトやランディングページ、デザインカンプの印刷にもピッタリです。

Print1を使用して印刷した場合

スマホサイト 印刷 Print1

利用環境

  • 対象ブラウザ:Google Chrome 最新版
  • 対応画像形式:jpg,gif,png,svg

Print1は制作業務等に使用しても大丈夫? –大丈夫だ、問題ない。

Print1で一番うぉおおおお!と思った所は、WEB制作業務で使っても問題ない所

通常WEB制作業務等は機密情報を守る契約をすることがほとんどで、その為にどんなに便利なサービスがあれどサーバーにアップロードする系のサービスは利用できないんですよね…。
万が一それで流出してしまったら問題になってしまいますから…。

しかしこのPrint1は全てローカル上で処理が完結されるような設計になっています。
その為外部に画像が流出する危険性はない設計になっております!素晴らしい…!!!

技術的にはHTML5のFileAPIを使って実装されているようです…!

黄金比や白銀比を図ることができるWEBサイト MetallicRatio

MetallicRatio

こんにちは!YOUKNOWです。

デザインをしている時に、一般的に美しいとされている比率に頼りたくなる時があります。
もちろん頼りすぎはよくありませんが、なんの取っ掛かりもない状態でデザインしなくてはならない場合、一般的に美しいと言われるカタチでデザインを作ったほうが結果的に良いデザインになることが経験上多い気がします。

MetallicRatioは、そんな一般的に美しいとされる黄金比白銀比を簡単に計算することが出来、デザイン業務に非常に役に立ちますのでご紹介します。

個人的にWEBデザインでオススメなのは白銀比

しかしWEBデザインに黄金比はなかなか合わせるのは難しいかなぁと思っていて、個人的によく使うのは白銀比だったりします。

また黄金比や白銀比に頼りすぎると、地味で飛び出ない印象が強く出てきます。
どこか一部分を崩したり、強調したりそういった工夫をすることでインパクトが出るデザインになりやすくなると思います。

グランドキリン ギャラクシーホップ買ってみた。

ギャラクシーホップ

グランドキリンギャラクシーホップを買ってみた。

ギャラクシーホップ

グラフィックが爽やかでとても好み。
瓶も素敵です。

グランドキリンシリーズは毎回飲んでたり。今回もコンビニで見つけて即購入。

開けた瞬間の臭いも独特

では、いただきます。

ゴクリ

飲みやすい さっぱりとしてる
口の中からスーッと抜けていく感じ

個人的には口の中に残る味が好きだったので、ちょっと好みとは違うけれども。

けどこの蒸し暑いなか、後味良い感じでさわやかーなギャラクシーホップ。やっぱり悪くないかも

なんにせよとっても美味しいです。

購入はお近くのコンビニエンスストアまで!

WEBデザインでよく出てくる箇条書きは、Photoshopの段落スタイルで終わらせよう

Photoshop2015

こんにちは!YOUKNOWです。

よく箇条書きで文章を入れて下さいとお願いされることがあります。
なかなか綺麗な箇条書きって面倒だと思っていました。

でもよーくウェブサイトとか見てみると、注釈とかの所は箇条書きで書く所が意外と多いんですよね

例えばmeijiのここさけ&あの花のキャンペーンサイト。

箇条書き

ここの応募概要とか箇条書きで作られていますよね。
この箇条書き一つとってもデザイナーだと、ついつい凝ってしまいます。

箇条書き

2行目の文字の頭の位置が、右の方の文字はわざわざ1文字ズラされてますね。

こういったこまかーいこだわりを繰り返してるから時間が辛くなっていくのがデザイナーだと思います。
完全にマゾですね!

こんなのただ半角スペース入れるだけやろ!って思ってる方も多いと思うんですが…自分もそうでしたが..
こういった注釈の所、何度も修正が入るのでその度にスペースの位置を調整していたら時間がいくらあっても足りません。

そう、デザイナーのお仕事の大半は修正(血涙)

なので今回はPhotoshopでこの箇条書きを楽にする方法をご紹介します。

Photoshopで箇条書きをラクに制作する方法

箇条書き

上記の画像の左側テキストは、そのまますーっと文章をタイプしただけの状態です。
右側のテキストは、段落スタイルを使用して整えた状態です。

そう..つまり…段落スタイルを使おうってお話なのです。今回は。

ちなみに上記の画像の右側にはこのようなスタイルを適用しています。

箇条書き

段落スタイルは画像の右側の方です。
微調整は必要ですが、この設定で箇条書きはうまくいきます。

フォント等によっても変化しますので、その場合は設定を微調整して下さい。

箇条書き

  • A. 整列とジャスティフィケーション
  • B. 左インデント
  • C. 最初の行の左インデント
  • D. 段落前のスペース
  • E. ハイフネーション
  • F. 右インデント
  • G.段落後のスペース

文字・段落についての詳しい説明はこちら

【2015年6月】新人WEBデザイナーが素敵だと感じたWEBサイト10選

こんにちは!YOUKNOWです。
チェックしているWEBデザインの中で気になったものを毎月まとめてご紹介する記事です。

※最新のwebサイトではなく、僕が最近見つけたサイトを独断と偏見でまとめて掲載しています。

大竹学園-大竹高等専修学校

東京で調理師・服飾(ファッション)の専門分野を学べる高校|大竹学園 大竹高等専修学校 - http___www.ohtakegakuen.ac.jp_

http://www.ohtakegakuen.ac.jp/
大竹学院のサイトです。
可愛いデザインで見つけた時に即保存しました。おんなのこかわいい。
写真の使い方と、パターンがうまく使われていて楽しくてポップな感じが出ていると思います。
ファッション雑誌のようなデザインの綺麗さもあって、ただただ「おぉ…」となるばかりです。すごいです。素敵です。

村上農園ホームページ

村上農園ホームページ - http___www.murakamifarm.com_

http://www.murakamifarm.com/
村上農園のWEBサイト。
トップページも素敵ですが、個人的に推しているのは中ページのデザイン。

村上農園ホームページ - http___www.murakamifarm.com_

洞見てくださいこの中ページ!中ページがとんでもなくオシャなんですよ…!
こんなに見やすく、かつオシャ…!!背景にはノイズを敷いていたり小技も効いていてもう…!

女子旅つくるプロジェクト

女子旅つくるプロジェクト|JTB × KOBE COLLECTION - http___jtpj.jp_

http://jtpj.jp/
しかしまとめてて思うのは、女性系のものは本当にデザインがいいなぁってこと!
それだけ女性がデザインを重視しているってことなんですよね。

 女子旅つくるプロジェクト|JTB × KOBE COLLECTION - http___jtpj.jp_

中ページももちろん綺麗にできています。
WEBサイトも最近はWEBサイトっぽさがなくなってきてる感じがします!
文字とかにもこだわっていて、最近はpng画像で文字を見ることや作ることが増えてきたなぁと思います。
ここらへんは検索エンジンの進化とも関係してると言われていますが..どんどんとできることが広がっていきますね。

あらい農園

京都 京北・向島の農家あらい農園 I 京都の京北(けいほく)と向島(むかいじま)で農業を営む、あらい農園のオフ_ - http___arai-nouen.net_

http://arai-nouen.net/

アイディアがビリビリと…。工夫にあふれたサイトで超興奮してます。
こういうサイトって今は結構少ないんじゃないでしょうか?

京都 京北・向島の農家あらい農園 I 京都の京北(けいほく)と向島(むかいじま)で農業を営む、あらい農園のオフ_ - http___arai-nouen.net_

この水色の部分が凄く気に入ってます。これ言葉で説明するより実際にみてもらうとおぉ…ってなるのでぜひぜひ見て震えて下さい。
ノイズをかけたり、影を入れたり、立体感を出したり…グリッドをあえて崩したり。もうとにかく最高です!!

マイ・フェイバリット関西

関西のおでかけWEBマガジン マイ・フェイバリット関西(マイフェバ) - http___www.my-fav.jp_

http://www.my-fav.jp/
マイ・フェイバリット関西のサイト。
きれいに整えられていて、とっても見やすいサイトです。
でもなにより気に入ってるのは、この一つ一つのバナーのレベルの高さよ…!
なんでこんな綺麗なんや…。

マイ・フェイバリット関西

http://www.my-fav.jp/feature/
この素敵なバナー達がいるおかげでトップページがより魅力的に見えます!

ニシアワー

ニシアワー|ぐるぐる、めぐる。岡山県西粟倉村の挑戦者たち活動をお伝えするメディア - http___nishihour.jp_

http://nishihour.jp/
ニシアワーのサイト。
写真やイラスト等の小物全てのレベルが高いです。

ニシアワー
Internet Archiveより
実はこのサイト、プチリニューアルをしたらしくヘッダー周りが変更されています。
この写真は変更前ですが、このヘッダーも大好きでした。

ニシアワー

中ページも素敵ですね。ついつい引きこまれてしまいます…。

インテリジェンスの派遣

HELLO,WORLD! インテリジェンスのエンジニア派遣 - http___inte-helloworld.jp_

http://inte-helloworld.jp/
トップページのグラフィックが個人的に大好きでした!
グラフィックとWEBならではの動きの表現がうまくマッチしていた事が何より良かったです。WEBっぽい!

NURO光 forマンション みんなの応募状況

NURO光 for マンション みんなの応募状況 - https___nuro.jp_mansion_status_

https://nuro.jp/mansion/status/
丁度NURO光と契約するときに見つけたサイト。
KISHIBOYが翻弄されるのを眺めて和むサイト..。
こういう動きのサイトもかわいくていいですね…!

株式会社リッシ

RISSIINC. - http___www.rissiinc.jp_#
http://www.rissiinc.jp/
制作会社リッシのサイト。


動きが凄いです。これを見て真っ先に東のエデンのEDを思い出しました。大好きなEDです。

RISSI

一部ですがGIFにしてみました。他のところもすごい動きなので一度ぜひサイトでご覧になってください。

humming by TURNER COLOUR SPICE

ペイント生活をはじめよう I humming by Turner _ - http___www.turner.co.jp_t-colourspice_paint_
http://www.turner.co.jp/t-colourspice/

こちらも動きが良いサイトです。スクロールに応じてコンテンツに合うように写真が動いていきます。
ストップモーションアニメとWEBを組み合わせたデザインです。

残念ながらフラッシュなので、iPhone等のスマートフォンでは閲覧出来ませんが、とてもクオリティの高いサイトです。

まとめ

少し前まではグリッドをかっちりきめるサイトが多かった印象ですが、最近は意図的に一部崩したりアニメーションしたり工夫が加えられてるサイトが増えてきた印象でした。

またWEBならではの表現に+でグラフィックの紙面的な表現が加えられているサイトが多くなってきた気もします。
特に女性をターゲットにしたサイトはそれが顕著にあらわれていました。

また先月もまとめていますので、よろしければご一緒にご覧ください

無料でプログラミング学習 Progate やってみた

progate

梅雨は本当に雨が多くてなかなか自転車でぶらぶら出来ないので良いストレス発散できずうずうずしてます。

こんにちは!YOUKNOWです。
最近デザインとかコーディングとかお仕事に関係ない事の記事ばかりなので、最近お仕事の修正待ちの戻り時間にやっている事のご紹介です。

Progate

progate 学べる 言語

Progateはプログラミングを基礎から無料で学べる学習サイトです。

  • HTML
  • CSS
  • jQuery
  • Ruby
  • PHP

…とWEBサイトを制作するのに必要な言語を学ぶことが出来ます。

Progateの学習手順

progate スライド説明

まず丁寧なスライドで説明してくれます。

progate 学習手順

スライドで理解したら、実際に手を動かします。
打ったコードは左下のRunボタンを押すと、プレビューが右上に出ます。
内容も基礎編は本当にだれでもわかりやすいようになっていて、応用編は実際にサイトを作る手順を学びながら学習出来ます。

感想

progate clear

なかなかよいです。ゲームっぽく作られているのもちょうどよいです!
お仕事の戻りの合間のとんでもなく何もやることがない時間に重宝しています。
社内でゲームはちょっとあれですが…こういった学習系ならわりとやりやすいです。

それなので、とりあえずHTMLの応用編とjQueryの基礎編をやってみました。
Rubyとかはかじったことがないけれど、それは今日やりたいと思っています。

ProgateはWEBデザイナーを目指している方やコーダーを目指している方にオススメできるとおもいます!
ぜひやってみてください

電動なので坂道もスイスイ。港区自転車シェアリング

港区自転車シェアリング

こんにちは!YOUKNOWです。

先日森美術館でやっているシンプルなカタチ展に行ってきました。
丁度そこに港区自転車シェアリングの貸出/返却ポートがあったのでせっかくなので利用してみました。

港区自転車シェアリングとは?

港区自転車シェアリング

港区自転車シェアリングは、30分100円で自由に電動自転車がレンタルできるサービス
指定の無人ポートから貸りることが出来ます。


また貸出したポートとは別のポートに返却することができるので、目的地についたら最寄りのポートに返却するといった使い方が出来ます。

利用料金

港区自転車シェアリング 値段設定

利用料金はこんな感じになっています。
電動自転車が借りられてこの値段はかなりお安いですね…。

港区自転車シェアリング 保険

基本使用料に保険の代金も含まれているため非常にリーズナブルなレンタルサービスです。

保険の詳細は上記の写真に記載されています。

都内は意外と坂道が多いですが、電動なので力を入れずにスイスイ移動することが出来ます。
初めて電動自転車を利用しましたが、自転車の走りだしに全く力を入れずにスイスイ進んでいく感覚にびっくりしっぱなしでした。

港区自転車シェアリングの自転車は、ある程度速度が出ると電動のアシストがほぼなくなり、一定以上の速度が出ないようになっています。
またペダルも力が入らなくなりますので、お子様でも利用しやすくできているなと思いました。

港区自転車シェアリングの借り方

一度きり利用するのであれば、個人的にパスコードを発行して自転車を借りる方法が一番便利かなと思いました。

おわりに

東京は自転車があると移動がとても便利になりますので良いサービスだと思います。
東京のレンタサイクルももっと活発になれば良いですね。

7/15amazonプライムセール開幕!

amazon prime sale

キタ━(゚∀゚)━!

WiiUとスプラトゥーンを買おうと思い光回線の契約を果たし、いざ購入しようと思っていたんですが…

なんと、“Amazon最大のセール”がやってくるらしい..。

Amazon プライムデー

なんでもamazon創立20周年かつamazon初の黒字化を果たした事を記念するセールらしく、アメリカのクリスマス商戦ブラック・フライデーを超える規模のセールが行われる模様

…?
ブラックフライデーを超える…?

ブラックフライデーって、スタンガンで攻撃を仕掛ける女性が現れたり、大乱闘が起きたり、ついにはサウスパークでアニメ化する…アレですよね
ゲームハード戦争を起こしたりするあのセール…以上…?

つまり…?
俺が欲しがっているWii Uが出展されないわけがない…?
あわよくばスプラトゥーンも…?

プライムセール スプラトゥーン

いつもヨドバシでポイントをためながら購入する自分だけれど、今回ばかりはamazonに浮気してしまいそう。
しかもこのセール、Amazon Prime会員限定だけれども、30日間のプライム会員無料体験でも参加できるらしい。

7/15に備えよ…

あーあ。今月も散財決定ですね

Macでアプリケーションのアイコンを変更する方法

Macでアプリケーションのアイコンを変更する方法

最近AdobeCC2015が登場しましたが、まだまだ現役のCC2014。
徐々にCC2015に移行していきますが、いきなりガッツリ移行して不具合連発では困ってしまうため今パソコンの中には複数のAdobe製品があります。
CC2014やCC2015やCS6等…なかなか種類があります。

photoshop

oh…
このように、どっちがCC2014でどっちがCC2015か分からない!なんてことがないように、CC2015の方のアプリケーションアイコンを変更してみました。

アプリケーションのアイコンを変更する方法

アプリケーションのアイコンを変更する方法

まずアプリケーションフォルダを開き、変更したいアプリケーションを右クリックで選択し情報を見るを選択します。

アプリケーションのアイコンを変更する方法

情報を見るをクリックすると、このようなウィンドウが表示されます。
そのウィンドウの右上にあるアイコンに、変更したいデザインのicnsファイルをドラッグ&ドロップします。

するとアイコンが変更されます。
注意点は、ファイルの種類がicnsファイルであることです。

アプリケーションのアイコンを変更する方法

今回使ったアイコンはSebastiaan de With’s BlogさんからMuirをお借りしました。
ありがとうございます。

icnsを自分で用意する場合

pngの画像を用意し、その後image2icon等のアプリケーションを利用してicnsファイルに変換して下さい。