アイコンのラフスケッチ集

こんにちは。デザインおよびコーディングなどを担当しております、黒木です。

ウェブサイトに使用するアイコンをデザインする際、どんなデザインにするべきか、いつも悩みます。フリーで使用する事のできるアイコンセットなども、ネットではよく転がっているようですが、やはり新規でデザインするサイトのテイストにあったアイコンというのは、なかなか見つからないものです。

今回は、アイコンのデザインに参考になりそうな、アイコンの「ラフスケッチ」を、さまざまなSNSからまとめてみました。フリーアイコンのまとめではなく、ラフスケッチです。

まずは’Designspiration’から、いくつかピックアップしました。

Vizzywig iOS Icon Design Process

http://designspiration.net/image/4762182974613/

映像を編集するアプリのアイコンでしょうか。

iPhone App Icon Sketches — Stage 2

http://designspiration.net/image/4762181802975/

カメラアプリのアイコンのようです。描きこみが凄い…。

Jillian Fisher // Illustrations & Things

http://designspiration.net/image/156251236221/

こちらはうってかわってシンプルなアイコン集。

Making_of

http://designspiration.net/image/1056560173031/

Safariっぽいアイコンと碇、浮き輪などの海をイメージしたアイコン。ちなみに救命浮輪のアイコンは、海外では”よくある質問”などのページに使用される事が多いようです。

 

次は’dribbble’。こちらは有名ですね。

Talents

http://dribbble.com/shots/901178-Talents?list=show&tag=icon_sketch

色つき。中世ファンタジーをテーマにしたゲームアプリのアイコンでしょうか。

Sketch

http://dribbble.com/shots/657818-Sketch?list=show&tag=icon_sketch

汎用的に使えそうなアイコン集。

Hamburger

http://dribbble.com/shots/1105025-Hamburger?list=show&tag=icon_sketch

これはもうアイコンというか…。何時間かけたんでしょうか。

Video editor icon

http://dribbble.com/shots/970335-Video-editor-icon?list=show&tag=icon_sketch

こちらも映像アプリっぽいアイコン。緻密に設計しているのが伝わります。

Icons

http://dribbble.com/shots/1016618-Icons?list=show&tag=icon_sketch

カフェやレストランなどで使用できそうな、ポップで明るいアイコン。完成図と合わせると非常に参考になりますね。

 

他にも’behance’など、デザインインスピレーションを与えてくれるSNSがたくさんあります。”icon”や”sketch”などのキーワードで検索してみると、色々面白いものが見つかりますよ。
皆さんもぜひ探してみてください。

Macの画面をモノクロ表示・白黒反転表示する

はじめまして。
主に病院サイトの更新を担当しているかとうです。
わたしが更新の際によく利用している機能に画面のモノクロ表示・白黒反転表示があります。

長時間白背景のディスプレイを見ていると目が疲れてしまいます。
そんな時に黒字に白表示へ切り替えると目の負担が軽減できます。

設定方法は「システム環境設定」→ 「ユニバーサルアクセス」の「表示」項目のチェックボックスを切り替えるだけです。

標準機能なので、当たり前に使われているものだと思いますが…
個人的には、病院サイトの更新の際にとても助かっている機能です。
病院のホームページなので、たまに、ちょっと正視し辛い内蔵系の画像等を掲載する必要があります。

そういったときにこの機能で写真の色味を反転することで、落ち着いて更新を行うことができています。

Javascriptで画像の色を変えるには

WEBディレクターの平井です。
 
仕事の波ってありますよね。弊社は2〜3月が繁忙期になるタイプの制作会社でして、
スケジュール表とにらめっこの毎日です。

 
さて今回は、

こういう画像があったとして、
これの色をカラフルに変化させたい場合にどうしましょう、というお話です。

 

サンプル

 

Flashでもなく、CanvasやSVGでもなく、GIFアニメーションでもなく、
れっきとしたJavascript/jQueryなのですが、そんなことできるのでしょうか。

 

 

 $(function(){<br />
  var i = 0, j = 0;<br />
  function changeColor(){<br />
    i += 5;<br />
    j += 3;<br />
    if(i&gt;=360) i=0;<br />
	if(j&gt;=360) j=0;<br />
    var colorR = Math.abs(Math.round(Math.cos(i*Math.PI/180)*128));<br />
    var colorG = Math.abs(Math.round(Math.cos(j*Math.PI/180)*128));<br />
    $(&#8216;#badge&#8217;).css(&quot;background-color&quot;,&quot;rgb(&quot;+colorR+&quot;,&quot;+colorG+&quot;,64)&quot;)<br />
  }<br />
  $(&#8216;#badge&#8217;).fadeIn();<br />
  setInterval(changeColor,70);<br />
});

 
 …タネ明かしをすると、白い透過PNGを置いて、後ろにあるdivの背景色をcssで変えているだけです。

 

 

単純ですね。
でも発想の転換、ということで、こういうのを選択肢として思いつけるように頭を柔らかくしておきたいですね。

それでは。

WebViewの内部の横幅を強制的に変更する方法

 

iOSアプリはある程度作りやすいので困らないのですが、Androidさんは、ほんと機種・OSVerによって動きがコロコロ変わったりするので、どうしようかなと思っている、現在某病院様のiOSアプリ・Androidアプリの開発を行っているシステム部の中村です。

こんにちは

 

さてiOSをUniversal(ipad/iPhone共有)を作っていると、どうしても、iPhoneとiPadで動作等に差が出てきてしまい、それを限りなく近づける事に時間を割かれてしまいます。

今回の開発も同じようにiPadのWebviewで思った様な表示が出来ずに困っています。

いつもであれば、html側を変更して調整するのですが、今回は実際に動いているサイトを強制的に整形しないといけないという状況に陥りましたので、そのときの逃げ方を書きます。

 

・webviewのHTML表示領域をiPhoneと同じ320pxにしたい場合

通常ならhtml側のmetaで指定する事でしつけるのですが、今回は出来ないため、

webViewで読み込んだ後、JSで強制的にJavaScriptでmetaダグを適応させる方法で逃げたいと思います。

 

何はともあれ、まずはソースを

スクリーンショット 2014-02-18 21.04.24

<br />
#import &quot;ViewController.h&quot;</p>
<p>@interface ViewController (){</p>
<p>}<br />
@end</p>
<p>@implementation ViewController<br />
@synthesize wv;</p>
<p>- (void)viewDidLoad<br />
{<br />
    [super viewDidLoad];<br />
	// Do any additional setup after loading the view, typically from a nib.</p>
<p>    //iPhoneの場合は自動的に、スマートフォンページに移動する<br />
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {<br />
        // iPad<br />
        NSURL *URL = [NSURL URLWithString:@&quot;http://www.kantei.go.jp/&quot;];<br />
        NSURLRequest *URLreq = [NSURLRequest requestWithURL:URL];<br />
        [wv loadRequest: URLreq];<br />
    }<br />
    else {<br />
        // それ以外<br />
        NSURL *URL = [NSURL URLWithString:@&quot;http://www.kantei.go.jp/&quot;];<br />
        NSURLRequest *URLreq = [NSURLRequest requestWithURL:URL];<br />
        [wv loadRequest: URLreq];<br />
    }</p>
<p>    wv.delegate = self;</p>
<p>}</p>
<p>//webロードが正常に完了<br />
&#8211; (void)webViewDidFinishLoad:(UIWebView *)view {</p>
<p>    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {<br />
        // iPadのみWebの領域を320サイズにしてからフィットさせる。<br />
        NSString *js =[NSString stringWithFormat:@&quot;var meta = document.createElement(&#8216;meta&#8217;);var iniScale = screen.width / 320;meta.setAttribute(&#8216;name&#8217;, &#8216;viewport&#8217;);meta.setAttribute(&#8216;content&#8217;,&#8217;width=320, initial-scale=&#8217; + iniScale + &#8216;, minimum-scale=0.5, maximum-scale=3.0, user-scalable=1&#8242;);document.getElementsByTagName(&#8216;head&#8217;)[0].appendChild(meta);&quot;];</p>
<p>        [wv stringByEvaluatingJavaScriptFromString:js];</p>
<p>    }<br />
    else {<br />
        // それ以外</p>
<p>    }<br />
}</p>
<p>- (void)didReceiveMemoryWarning<br />
{<br />
    [super didReceiveMemoryWarning];<br />
    // Dispose of any resources that can be recreated.<br />
}</p>
<p>@end</p>
<p>

何をやっているかというと

webviewにurlを与えて表示して、ロード終わったあとにiPadのみにJavaScriptでメタタグを貼付け強制t系に、320pxで動かしているだけです。

 

これでレシポンシブサイト(首相官邸 :  http://www.kantei.go.jp/ )をipadでiPhoneで表示しているイメージで表示できます。

HTMLをいじれない場合使ってみてくださいませ。

表示サンプルをアップしておきます。

スクリーンショット 2014-02-18 20.10.49

iPadRetina表示(標準)

スクリーンショット 2014-02-18 20.10.24

iPadRetina表示(メタタグで強制320px表示)

IMG_3278

iPhone retina 4インチ

どんなCMSがあると便利?

こんにちは。主に医療関係のディレクションを担当している伊藤です。

今回は、「医療系サイトにあると便利なCMS」をご紹介します。

CMSは、いつでも自分で簡単に更新ができるシステムのこと。
<急な変更や案内>を、患者様に<できるだけ早く!>お伝えしたいコンテンツへの導入がオススメです。

病院サイトでの、マストといえるぐらいCMS化すると便利なのは<外来担当表>です。

メディカルデザインのフロント画面とCMSの管理画面の一例をご紹介します。

001

ぱっと感覚的に使いやすいものになるよう開発しています。

その他では<新着情報><診療時間案内>や<休診情報>も、あると便利。
先生の急な変更にも、即時反映が可能です。

急ぎのお知らせではなくても、医療講演などカレンダー形式での掲載が簡単にできるCMSもありますよ。

004

 

即時反映できるCMSって便利かも!なんて思ったら、お気軽にご相談くださいね。

テンプレートファーストのススメ

title
みなさんこんばんは!
弊社のデザインとコーディングを担当しております國宗です。
 
僕は新規のWebサイトを作らせて頂く機会が多く、サイトのベースとなるHTMLやCSSをコーディングしています。
 
さて、今日はより効率良くサイト制作を進めるための制作フロー「テンプレートファースト」という考え方をお話させて頂きます。
 
テンプレートファーストとは、聞きなれない言葉ですが、テンプレート(下層ページ)から優先してコーディングする事です。僕が勝手に作り出した造語です。
 
Webサイトの制作フローは、制作会社やクライアントによってまちまちだと思います。
僕も日頃、より効率良く作業を進めるために試行錯誤した結果、テンプレート(下層ページ)よりコーディングするのが良いのではないかとの結論に至りました。かつては、納品直前までヒーヒー言いながら、バグの修正やその他の修正対応に追われていましたが、納品前に落ち着いて作業出来る様になりました。
 
 
thumb1

今までのワークフロー

flow1
トップの実装→下層ページの実装→納品前のチェック(各ブラウザ表示、文字校正、リンク、alt等)→本公開。
 

テンプレートファーストのワークフロー

flow2
テンプレート(下層ページ)の実装→各ブラウザの表示→トップの実装→残りの下層ページの実装→納品前のチェック(各ブラウザ表示、文字校正、リンク、alt等)→本公開。
 
慣れるまではやや手間に感じてしまいますが、こうする事でしっかりとした下層ページが完成し、ブラウザ間の表示を修正しておけば納品前の修正は比較的軽めになるのではないかなと思います。
 
また次のメリットがあります。
•トップページは別のスタイルで記述するので、body id="○"等にならない。
•複数の作業者で作業を進められる。
•納品前は、有る程度バグが潰れているので、重たい修正は少ない。
 
次回のサイト制作時に、参考になれば幸いです。
 
 

webディレクターのfirefox

どうも。どうでもいい知識とタスクだけが溜まるディレクターの平田です。
webディレクターやってる割にブログなんて書いたことないのですが書かせて頂きたいと思います。

他の皆ほど特化したネタもなく、使い古された感がありますが、日ごろ業務でお世話になっているFirefoxのアドオンについてご紹介します。


■ツリー型タブ
仕事柄、お客さんと電話で話しながら参考にするサイトを開きつつご相談やご提案する機会も多く、また困った時の調べ物でたくさんのサイトを開くケースがままあります。

こんな感じに。
treetab01

これはまだ各タブに何が書いてあるのか読み取れるのでまだマシな方で、開きまくるとタブが縮んで何のページを開いているのか全く分からなくなります。

これを解消してくれるのが「ツリー型タブ」というアドオンで、基本上か下のみにしか表示されないタブバーを右もしくは左に表示してくれる様にするものです。

アドオン追加後のブラウザキャプチャが以下。
treetab02

今、何を開いてるのか一目瞭然ですね。
設定次第では左に開いているタブの幅をもう少し変更できますし、高さなども変更ができる様です。
また、ツリー型という名が付いている通り、親タブ – 子タブ – 孫タブ – ・・・みたいな事も出来ます。
私は他にもいくつかブラウザを使ってたりしますが、鬼速Chromeに乗り換えきれないのはこちらのアドオンのせいだったりします。

 

■Pearl Crescent Page Saver Basic screenshot tool
有名過ぎて今更説明するのもなんですが、スクリーンキャプチャ用のアドオンです。
他にも同じ様なアドオンは数多くありますが、使いやすさと軽さの点で必ずこのアドオンも入れています。
画面の構成図を起こしたり、修正指示を出す場合に力を発揮してくれます。

実装するとカメラのアイコンが表示される様になります。(下記画像では左下、サブメニューを開いたところ)
crescent01

 

表示部分のみ画像として保存は今ブラウザで見えている範囲のみをキャプチャし、
ページ全体を画像として保存は今開いているページ全体をキャプチャしてくれます。

 

・表示部分のみ
20140207_ソチオリンピック2014 - JOC_www.joc.or.jp-games-olympic-sochi

・ページ全体
20140207_ソチオリンピック2014 - JOC_www.joc.or.jp-games-olympic-sochi(1)


このアドオンの存在を知るまではプリントスクリーンでキャプチャしていたのですが、あちらだとページ表示領域以外の余計な部分もキャプチャしてしまうので、その後のトリミング作業が面倒なことこの上無く、今ではこのアドオンなしではキャプチャする気になれません。


取りあえず、今回は上記の二つを紹介しておきます。

 

PC作業による目の負担を軽減するフリーソフトウェア 「f.lux」

 こんにちは。主にJAチームで更新業務を担当している植村です。

 昨日は春のように暖かくて、今日は真冬のような冷たさですね。

 インフルエンザもピークを迎えているようですし、体調管理にはくれぐれも気をつけたいところであります。

 さて、

 私たちのようにPCで長時間作業をする人間は、目の疲労&視力の低下が気になるところです。

 最近ではブルーライトを軽減するPC用の眼鏡を使用している方が多いようですが、もっとお手軽に目の負担を軽減できる方法があります。

 それが、こちら ↓

  「f.lux」をダウンロードする 無料 (2014年1月現在)
  

 もう使用されている方も多いと思いますが、なんとこのソフトウェア、ディスプレイから発光されるブルーライトを調整してくれます。つまり、眼鏡によってブルーライトをカットするのではなく、根本からカットしてしまおうという優れものなのです。

 使い方はいたって簡単、ソフトウェアをダウンロード&インストール後に”preferences” で設定画面を開き、部屋の明るさや自分の好みに合わせて設定を行うだけです。


 
(1) まずはLocation で現在地の位置情報を取得します
(2) 次にスライダーを操作して自分の好みの明るさを調整します
  ※ 位置情報を設定することにより時刻を取得 → 日中の明るさと日没後の明るさを自動で調整してくれます
(3) Done をクリックして設定保存すれば終了です

 デザイン関係の作業など、色を扱う作業時には不向きですが、事務作業などで長時間画面を眺めなければならないときなどにはなかなか重宝するのではないでしょうか。私自身、使い始めは「画面が少し暗いかな」なんて感じていましたが、不思議とすぐに慣れて、いまでは設定を戻すたびに「画面青い!目痛い!」とまで感じてしまいます(笑) 。まあ、効果のほどがどれだけあるのかは実際のところ定かではありませんが・・・試してみる価値はあると思います。数千円を払って眼鏡を買う前に。

 以上、目の負担を軽減してくれる(かもしれない)フリーソフト 「f.lux」の紹介でした。
私、この記事を書くまでMacのみのアプリだと思い込んでいて、Mac使いの優越感に若干浸っていたところがなきにしもあらずでしたが、調べてみたところ普通にWindows版もリリースされているみたいです。今回はMac OSでの設定方法についての解説でしたが、Windowsでも同様に設定できると思いますので、皆さん是非試してみてください。