特別なソフトがなくたって「ペイント」で画像加工ができルンです。


こんにちは。

Webデザイン会社にいながら、ディレクターでもデザイナーでもコーダーでもましてエンジニアとかでもない、

ただのOL(事務)の木元です。素人目線でお送りします。

 

さて、画像加工と言えばフォトショップが王道。

ですが、デザイン関係等々の仕事をしている人じゃないとなかなか触る機会もないソフトですよね。

でもでも画像加工はしたい!

 

近頃は無料ソフトも多く出回っていますが、

「ど、どのソフトを選べばいいのか分からない。」
「い、インストールって何?」っていう方だって結構いらっしゃると思うんです。(私も含む)


そんなときは!!

moji

(Windows7です)


Windowsにはデフォルトで入っているお絵かきソフト、それがペイントです。
(Macユーザーさんごめんなさい。)

一般の方にはじゅうぶんな画像加工ができます。↑上の文字もペイントで作成。

 

たとえば、

「画像のサイズ(容量)を小さくしたーい!」

画像をネットオークションやブログなどにアップしたり、フリーメールに画像を添付するとき、1枚あたり〇MBまでと制限があったりしますよね。
最近のカメラは高画質なのでそのままだと容量オーバーになってしまうことも多いです。


これが「サイズ」いじるだけでぺろっとできます。

size

画像を開きます。(弊社のお犬様くるみさんです。)

size2

そしたら、サイズをいじるだけ!

size3

小さくなりました!これを保存すれば容量をおさえられます。

 

 

はたまた・・・

「合成って、してみたいよね。。」

これも意外と簡単にできます。

gousei

まずは、切り取りたい部分を、色ペンでかこって、、

(※注意 !!  背景を塗りつぶす色は、対象には含まれない色にしてくださいね。)

gousei2

背景を全部ぬりつぶします!そして画像全体を選択してコピーします。

gousei3

次に、合成したい背景の画像を開きます。

gousei4

そこにさっきコピーした画像を貼りつけましょう。

貼りつけたら「色2」を塗りつぶした色(ここでは水色)にして、

「選択」の▼から「透明の選択」をクリック!

kansei

できましたー!!

ちょっとガタガタなのはペイントが悪いんじゃなくて私が不器用なだけなのでご安心を!

フォトショがなくても色々できます!お試しあれ~

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

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

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

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

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

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

どんな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でも同様に設定できると思いますので、皆さん是非試してみてください。

IEでhistory.backで戻るとフォームの内容が消えるバグ対応

Android開発が久々すぎてテンパッてる状態のシステム部中村です。

昔からAndroidアプリの開発は、Verの違いで作り方と仕様が色々変わったり、機種によって違いがあったり、エクリプス上でのGUIの作りこみがわかりにくいなどであまり手を出したくなったのですが、お仕事なので、がんばってます。

といいながらAndroid開発で詰まったので、ブログを書くことで気分転換!!

 

 

さて、本日お問合せフォームの新設を病院チームからお願いされたので、ささっと片付けるつもりが、

デバック作業中に、なぜかIEでhistory.back()を使ってページ繊維すると(戻る)と入力されていたフォームが空になるという症状を発見。

よくよく調べてみるとIEのタブブラウザー化してから良く出る症状のようでした。

HTMLのキャッシュ設定を正しく指定していないと、空白になるようです。

 

症状の発生に関しては

1:inputフォームに値を入れる

2:submit で次の画面へ移動する

3:history.back()で前のページに戻る

結果:入力した内容が消えて空になっている

という流れなのですが、 FireFoxやchorome では発生しない現象なので、見落としやすい落とし穴です。

 

対処方法は

メタタグに

<meta content="86400" http-equiv="Expires" >

このタグをいれて明示的にキャッシュさせてやれば、OKです。

これで、症状が改善されました。

 

history.backを使わなければいいのですが、どうしても使用する際は症状が現れる前にタグを打っておくことにしておきます。

 

PhotoshopとBridgeを交互に使ってraw現像を高速化

初めまして。デザインや写真の担当をしております梶岡です。
このブログではPhotoshopやIllustratorなどのネタを今後担当していこうと思います。

さっそくですが、一眼レフをお持ちの方、
大量のRAWデータを現像する際はどう対応されているでしょうか?

私がまだ趣味レベルだった頃は、一枚一枚Photoshopのプラグインである"Camera raw"で現像していましたが、
そのやり方では途方もなく時間がかかってしまいます。
モノによっては1000~2000枚程の画像の処理をしないといけない場合がありますw

 

普通にPhotoshopで開いた場合

1
一枚ずつしか処理できない!

 

まとめてファイルを開くには

2
「まとめていっぺんにraw現像をしたい!」というときは
Photoshopを立ち上げて、「ファイル/開く」で複数選択すればOKです。

 

3
今回はちょっと青めに修正してみます。

 

同期させる

4
他の写真も同じ修正を反映させるには、「すべてを選択」して「同期」させます。
チェックボックスで反映させる項目を個別に指定することも可能です。


5
同期させて他の写真も青く修正されました。
あとは左下の「画像を保存」をクリックすれば一気にjpgに書き出されます。


しかしこの処理には問題があり、
枚数によっては1時間以上Photoshopが使えなくなります

そんな時、いらない子扱いされがちなAdobe Bridgeが大活躍です!

Bridgeの主な機能は、画像を一括で確認したり比較したりできる管理ツールのようなものですが、
Photoshopの代わりにCamera rawを立ち上げることが可能なのです。

 

Adobe Bridgeでまとめてファイルを開くには

6
複数選択してCamera rawを押すだけ。


PhotoshopとBridgeを併用して交互に作業することで、
ノンストップでraw現像が可能になります。
ただし、PCにはものすごい負担を与えるのでクラッシュにはご注意を。。

modern.IEでInternet Explorerの動作チェックを簡単に。

はじめまして。サイトの更新などを担当していますアルバイトのイワイです。

コレは使える!おもしろい!というようなことについて、ブログに書いていこうと思いますので、よろしくお願いいたします。

 

macで作業されている方、IEでの動作チェックはどうされていますか?

今回modern.IEってのを見つけましたのでちょいと試してみようと思います。

 

modern.IEとは?

Microsoftが提供しているウェブ開発検証作業のための仮想マシンです。

個人的には、macで普通に作業しながら新規ウィンドウみたいなかんじでIEみちゃうツール!と解釈しております。。。※無料です!!!

これちゃんと使えたらものすごく便利ですよね!!!

modern.IEを使うには VirtualBoxというアプリケーションが必要なので、まずはインストールしてみましょう

 

Continue reading

出張記録:神戸編 デジタルサイネージ 構築・構成編

寒い日が続いておりますが、皆様いかがお過ごしでしょうか。

自分は風邪を引きその上急にお腹が痛くなるという謎の症状に涙させられました。

さて先日出張の記事の続きとして、

今回の記事では、現在神戸市立医療センター中央市民病院様にて運用いただいています、デジタルサイネージの構成方法をご紹介します。

弊社ではサイト製作・紙媒体等の製作以外にも、デジタルサイネージなどの導入実績がありますが、この神戸市立医療センター中央市民病院様の案件はその中でもかなり一般の方にご利用されている商材です。実際メンテナンス業務時に利用者様の数をカウントしてみますと、かなりの方が使っていただいている事もあり大変ありがたいことです。

ちなみに弊社ではiPadなどによる小規模のデジタルサイネージシステムを構築することも可能です。ご質問いただければ、最適なプランをご提案させていただきます。

 

Continue reading