STAFFBLOG スタッフブログ

修正依頼はこのツールで決まり!? AUN(あうん)の使い方

araki
2017/06/21
閲覧所要時間:約5

AUN(あうん)
こんにちは荒木です。


皆さん仕事の中で修正依頼を出す際にどのようなツールをお使いですか??

普段PCに慣れていない方だとこのWEBページの修正点をどのようにして相手に伝えよう・・・。
などと悩んだことはありませんか?


普段だとWEBページのキャプチャを撮り、
そのキャプチャに修正箇所を書き込んだり、
印刷して手書きで修正箇所を書き込みそれをFAXで相手に送るなど
色々やり方はあるかと思います。

しかし今回ご紹介するツールは、
PC操作が苦手な方でも簡単に導入できるツールとなっております。

こちらの記事を最後まで読んでいただくときっと
数分あれば下記のような修正指示を出すことができること間違いなし!!!


Windows・MACどちらでも関係なく使用でき、
専用のアプリをインストールしたりする必要もありません。

下記ページにアクセスすれば誰でもすぐに利用することができます!

AUN[あうん]: ビジュアルコミュニケーションツール
https://aun.tools/


※会員登録不要、利用料も無料です。



AUN(あうん)とはどんなツール?


AUN(あうん)とは?
付箋紙の感覚でサイトや画像にメモを貼って、共有できるツール。会員登録不要・利用料無料・パスワード設定可能・URL入力のみで簡単にWEBページのキャプチャが撮れるなど初心者でも簡単に導入できる便利なツールです。







AUNの使い方

それでは早速AUNの使い方についてご紹介していきます。
本当に直感的で操作も複雑ではないので利用したことがない方は是非利用されてみてください(o^^o)


1. AUNに画像を取り込む

AUNでは3種類の画像の取り込み方があり、
自分にあった取り込み方法をご選択ください。

1. WEBページのURLを入力しキャプチャを撮って取り込む
2-1
「キャプチャ」というボタンの左側へ「デスクトップ」というボタンがありますが、
ここでお好きなデバイス用のキャプチャを撮ることができます。

【 デバイスの選択肢 】


【 トリミング 】


ここではURLを入力後、「キャプチャ」というボタンを押すと上記のような選択肢が表示されます。
すべての画面を全体的に取り込みたい場合は「しない」を選択。

▼「しない」を選択した場合の取り込み画面
もし一部のキャプチャだけが必要な場合は「トリミングする」をクリックすると、
ドラッグで必要な範囲を選択できるようになっております。

▼「トリミングする」を選択した場合の取り込み画面

※選択範囲につきましては1度選択した後でも自由に範囲を変更できます。





※実際のページとは表示が多少異なる場合がございます。


2. PC内にある画像を取り込む
2-2
既にPC内に保存している画像をドラッグアンドドロップもしくは「選択」ボタンから特定のファイルを指定して取り込むことができます。



3. クリップボードから取り込む
2-3
画面のスクリーンショットを撮った状態でAUNの画面で貼り付けをすることで画像を取り込むことができます。

クリップボードとは
「コピー」や「切り取り(カット)」したデータを一時的に保存しておく場所を、「クリップボード」といいます。入力の手間を省き、入力ミスを少なくする非常に有益な機能です。

Windows・MACそれぞれのスクリーンショットの撮り方につきましては下記よりご確認ください。(AUNの画面から確認することも可能です。)
画面スクリーンショットの撮り方
https://aun.tools/web/visual/inc/pdf/howto_screenshot.pdf





画像にメモを書き込む


画像の上でメモを書きたいエリアをドラッグで選択します。
メモの追加−1
追加したメモに関しては左側に一覧として表示されますので、
そちらからメモの編集・移動・削除が行えます。


メモの追加
メモの追加−2

※メモを追加する際にはPC内にあるファイルも併せて添付することができます。


メモの編集
メモの移動


メモの移動
メモの編集


メモの削除
メモの削除




キャプチャを追加する

1回の修正指示で1ページとは限りません。
「このテキストがこのページとこっちのページにも入っている。」などという場面が少なくないはずです。

そこでAUNでは1ページだけではなく複数ページのキャプチャを追加することができるんです!

追加方法は簡単!

まず下記のように右上もしくはページの最下部に「 + 」のアイコンがありますので、
そちらをクリックしていただくと別ページのキャプチャを取り込むことができます。
(キャプチャの取り込み方は一番最初の取り込み方法と同じです。)





キャプチャを共有する

さてキャプチャの追加やメモの追加が完了すれば次は相手に送ってみましょう!

送り方もとても簡単!!!

編集が終わったら下記の図の通り右上の「保存&終了」をクリック。

共有する際のタイトルを入力します。


もし特定の人意外に見られたくない場合はパスワードを設定することも可能です!

下記のように「閲覧パスワードを設定」にチェックを入れお好きなパスワードを入力していただくだけで簡単に設定ができるようになっています。


2箇所(パスワードを設定しない場合は1箇所)の入力が完了したら、
その下の「保存する」のボタンをクリックします。

すると下記のように「共有URL」が表示されますので、
こちらのURLをコピーしてメールに貼り付けたり、
「メールで送る」を選択すればご自身がおつかいのメールソフトが立ち上がりそこから
URLを送信することもできます。





キャプチャの再編集&PDFの書き出し

上記の画面で間違えてURLをコピーせずに閉じてしまっても大丈夫!

閉じた後の画面では共有するためのリンクのコピーや、
再編集・PDFなどでの書き出しなどの操作が可能です。
エクスポートを押すとZIPファイルをダウンロードすることができます。

ダウンロードしたZIPを解凍するとPDFファイルが入っております。




最後に

これでビジュアルコミュニケーションツール AUN(あうん)の使い方は以上になります( ´▽`)

どうでしょう!?
説明をみるとちょっとめんどくさい感じはありますが、
実際に使ってみるととても便利なツールだと感じるはずです!!!

是非日々の業務の中へ取り入れてみてはいかがですか( ^_^)/?


それではまたいつの日か便利なツールがあればご紹介していきたいと思います♪

二人目の新入社員です!

2017/04/24
閲覧所要時間:約2

こんにちは!初めまして

二人目の新入社員、藤本です!

熊本デザイン専門学校グラフィック科卒のハタチです!

家には犬と亀と雀が二羽います(すずめ!?)

地元は菊池市で、実家から通勤しています。

片道20㎞超で少し遠いです笑

 

趣味は

スケートボード、車、バイクなどで、割とアウトドアです!

ついに先週、エンジンルームに手をつけてしまいました笑

IMG_2361
エアクリーナーを純正から社外品に交換しました!

 

走ってみた結果

・アクセルのレスポンス(反応)がよくなった

・中高回転からの粘りがある

・吸気音が「ぼふっ」と響いてかっこいい!

・燃費が少し悪化する、、、(当たり前)

 

などなど・・・純正とはえらい違いです笑

取り付けは意外と簡単で一時間もかかりませんでした

しかし、こんな簡単に車が変わるのかと思うとめちゃくちゃ面白いです!!

 

ちなみにスケボーですが、1年前に始めたばっかりなのでまだまだ下手くそです泣

しかも、先週友達の姉の車に轢かれて真っ二つに、、、、IMG_2334
まだまだ使えるデッキだったのに、、、

 

そんな話はさておき、

入社してそろそろ一ヶ月経ち、会社にはだいぶ慣れてきましたが

Webデザイナーとしてはまだまだです。

右も左もわからないような若輩者ですが!

先輩方と同じような仕事が出来るように日々精進してまいります!

どうか、ご指導ご鞭撻のほどよろしくお願いします!!

はじめまして!!新入社員です!!

2017/04/20
閲覧所要時間:約2

みなさんはじめまして!!
4月に入社しましたホリカワです。
21歳の新社会人です!!


自己紹介

ブログ初投稿ということなので、まずは私の自己紹介からしようと思います!!

出身は熊本県の益城町。
サントリーのビール工場があるところの近くに住んでます。
なので、小さい頃から何回も工場見学に行ってました(笑)

兄弟は双子の弟がいます!
弟は、会社の近くの某ケ○ズデンキで働いているので、気になる方は行ってみてください!
多分、すぐわかると思います(笑)

趣味はゲームやギターなど比較的インドアです^^;

しかし!!

最近は友人に誘われてダーツをはじめたので、ちょっと外に出るようになりました!

↓ちなみにこちらが私のギター(右のやつ)で、左のは弟のベースです!!
2014-09-22-18-42-53_deco

この業界を目指したきっかけ

私は小学生の頃からパソコンを使うのが好きで、小学校のクラブ活動ではパソコンクラブに入って
タイピングゲームをしたりペイントツールで絵を描いたりしていました。

それから中学、高校と将来はパソコンを使った職に就きたいなぁ〜とざっくりとした夢を持っていました。

高校3年生になり進路をどうするか悩んでいる時に、県内でウェブについて学べる学校があるというのを知り、ずっとパソコンを使った職に就きたいと思っていた私は、すぐにその学校のオープンキャンパスに行き(3回も!!)入学することにしました。


最後に

入社してもうすぐ1ヵ月が経とうとしていますが、まだまだ覚えることが多く日々勉強の毎日です。
それでも新しいことを1つずつ確実に覚えて行き、少しでも早く一人前のマークアップエンジニアになろうと思っていますので、ご指導のほどよろしくお願いいたします!

UTMって何?

2017/03/07
閲覧所要時間:約4

UTM(ユーティーエム)という言葉を聞いたことはありますか?

今回はセキュリティのお話です!
知っている人も知らない人も、今後の会社運営には必要になってくると思いますので5分ほどお付き合いくださいm(__)m

UTMとは?

security-265130_1920
「UTM」というのは
Unified Threat Management」の略で、「統合脅威管理」と訳されます。

いやいや!
和訳してもなんか物々しくて分かりにくくない!?

簡単に言うと
さまざまなサイバー攻撃(脅威)の対策(管理)を1台に統合しますよ!
というセキュリティ機械のことです。

・・・ん?
個人だとPCにウイルス◯スターみたいなソフト1つで管理してるけど・・・?
わざわざそんな機械がいるの?

個人レベルであればそれでもよいでしょうが、
会社のようにある程度の組織になると、組織全体のセキュリティを構築する必要があります。
最後のセキュリティホールは「人」と言われているように、どんなに個々のPCを守っても、それを扱う人のミスによってウイルスに感染してしまうことが多いのが実情です。

人的ミスを防ぐには、
ネットワーク内に入ってくる前にできるだけこうしたリスクを排除しておくシステムが必要になります。いわば川上での対策ですね。

一方で、
これまで会社全体のセキュリティを構築する際には、
ファイアウォールはA社、アンチウイルス対策はB社、アンチスパム対策はC社・・・というように多くのセキュリティサービスの中から、対策対象に合わせてそれぞれ選定・購入する必要がありました。
こうなるとソフトウエアごとで操作も異なり、運用しにくいシロモノになってしまいます。

そこでUTMの出番です!
UTMは1つの管理画面上でファイアウォールから各種脅威対策まで一元管理ができます。
つまり、分かりやすいし、使いやすいし、余計なコストも抑えられるってわけです。

UTMって何をするの?

bodyworn-794099_1920 イメージとしては
インターネットの入口に空港の検査官が警備しているイメージです。
インターネットの入口で不正なファイルが入ってこないか、不審なデータの流出がないかチェックして防ぐ機能があります。

え?それってファイアウォールと同じじゃない?
と思われる方もいるかもしれませんが、
ファイアウォールは内部からの通信はほぼ許可しています。

いわば、
入国はチェックしても、出国はほぼスルーされてしまっているんです!
・知らぬ間に侵入されたスパイに機密ファイルを持って出国されているかもしれません。
・社内PCからエ□サイト(ウイルスの巣窟)へバカンスに向かう人がいるかもしれません。
そうしたことも未然にシャットアウトしてくれるのがUTMです。

UTMのセキュリティ機能
ファイアウォール、アンチウイルス・マルウェア対策、アプリケーションゲートウェイ、不正侵入検知、コンテンツ・フィルタリング、VPN、ランサムウェア対策・・・
これらの機能すべてがUTM1台に入っています。

実はUTMは大手企業などでは、もはや一般的に導入されているシステムです。
一方、ハイスペック&高額であったため、中小企業には導入されづらいものでした。
しかし近年になって比較的安価に導入できる中小企業向けのラインアップができ、普及が進みつつあります。


UTM導入なら!

00_PP42_PP_TP_V
そこで!
この度弊社でもCheckPoint社のUTMのご提案を開始しました!

数あるUTMの中でも弊社イチ押しの製品です!

UTMについてもっと知りたいことがあれば、お気軽にお問い合せくださいね!
いろいろなセキュリティ情報についても今後発信していきますので、よろしくお願いします!
「サイバー攻撃=個人情報流出=損害賠償問題」のいま、セキュリティ強化は重要ですよ!

今回はまずUTMの概要についてお話しました。
次回はもう少し詳しいお話もできればと思います!

最後に
サイバー攻撃をリアルタイムで可視化した面白いサイトがありますのでご紹介します。
ThreatCloud Live Cyber Attack Treat Map
https://threatmap.checkpoint.com/ThreatPortal/livemap.html

うわー、インドめっちゃ狙われてる!
インドネシアもめっちゃ狙われてるのはなんで!?
・・・みたいな暇つぶしができます!笑
(日々狙われているという、とても怖いモニターなんですけどね^^;

はじめまして!!

2017/02/20
閲覧所要時間:約2

ブログ初投稿!!
ヒロキと申します!
入社してから、ついにブログ当番が回ってきましたねー。

なーんば話そうかいね・・・
とは言えまずはやはり自己紹介ですかね!

ということで!
自己紹介(・∀・)!!

熊本生まれ、熊本育ち、水瓶座、28歳、弟。
去年まで5年間ほど福岡に住んでいました。
スポーツは遊び程度ならいいですが、下手です(^_^;)

趣味はブームがあり、これまでアクアリウム、バイク、カメラにハマりましたね!
社内にアクアリウムが趣味の方も、カメラが趣味の方もいるので、再燃予定です(・∀・)

中でも今かなりハマっているのが、「釣り」です!
大物はたまにしか釣れませんが、
こんなのや
IMG_0322
こんなの、
IMG_0233
こーんな感じで
IMG_0500 めっちゃ楽しんでます( ´∀`)!!

釣りの面白いところは、そのゲーム性ですね。
私はルアー釣りがメインなんですが、
釣れる時は釣れるし、釣れない時は全然釣れないんですよね(^_^;)
釣れる時はもちろん面白いんですが、
釣れない時にも
「どうして釣れないのか?」、「こうしたらいいのでは?」
とあーだこーだ考えて、試してみる・・・
そんな中で不意に

「ガツン!!」

と魚が掛かった感触が手に伝わるあの瞬間!!
キタ━━━━━━(゚∀゚)━━━━━━ !!!!! (←まさにこんな感じです笑)

掛かれば、今度は釣り上げるために魚との真剣勝負。
魚の引きを楽しみながら、バラさない(逃げない)ようにコントロール。

ここからも面白くて、
釣り上げるまで「一体何が釣れたか」わからない!
「何が出るかな?何が出るかな?タララランラン・チャラララン♪」のやつです笑
くじ引きみたいなワクワク感が何とも言えない楽しみでもあります。

そして釣れれば、
新鮮でおいしい魚というお土産も手に入ります(¯﹃¯*)
IMG_0513 釣って楽しい、食べておいしい、一石二鳥の遊びなんです!

仮に全く釣れなくても、
IMG_0156 こんなキレイな景色を堪能できるし、次こそは!と燃えてきます!!
大海原に思いっきりルアーをぶん投げる爽快感(・∀・)!
いいストレス発散になりますよ〜!

釣りが趣味な方、興味ある方、バシバシお声がけください(゚∀゚)人(゚∀゚)
以上、釣りキチもといヒロキからでした´ω`)ノ!
これからどーぞよろしくお願いします。

あー・・・今週末も釣りに行きたい!笑

実際のWordPresssサイトの作り方について

井上武明
2017/02/09
閲覧所要時間:約8

フロンティアビジョンに入社してもう1年の井上です。
入社に合わせてウェブ制作環境をWindowsからMacに切り替えたので、今回のブログでは会社から貸与してもらっているMacBookPro13の使い勝手をレポートしようかなっと思っていたんですが・・・電源が入らなくなる故障が発生しました。

メーカーに修理に出したのですが、「電源が入り、チェックでも異常なしだったので戻します」とそのまま帰ってきてしまいました。
大丈夫かなぁっと思っていたらやはり再発。
2回目は前回修理から90日以内という事でロジックボード交換を無償交換。

2回とも金曜日に修理に発送して翌月曜には戻ってくるというAppleのサポートには感動しましたが、やはり故障中は作業効率がガタ落ちしてMacBookPro13の使いやすさを再認識することになりました。

あたりまえですが機械にも健康と寿命があります。
機械もデータもバックアップはしっかりしましょう。

心の傷は置いておいて、実は先日「WordPressの投稿と固定ページの違いってなんだっけ」と話が出ていたので今回はWordPress関連のお話です。

WordPressとは

WordPressとはCMS(コンテンツマネジメントシステム)の一つで、ウェブサイト上に管理画面を用意してお知らせやブログなどのページの中身を追加・修正するプログラムのことです。

WordPressの利用率はもの凄く高く、W3Techsの調査データによると今日現在でCMSのシェアが58.6%、ウェブサイト全体でも27.5%で使われています。
2位以降のCMSと比較してその利用率の差は圧倒的な状況ですね。
img3
上記図の元データ w3techs
https://w3techs.com/technologies/overview/content_management/all


色々な更新機能をウェブサイトに持たせる事ができて人気のWordPressは、その基本概念として1つのページを「投稿」「固定ページ」に分けて考えられています。

WordPressの投稿と固定ページの違い

WordPressは元々ブログ用に作られたプログラムで、ページの概念を時系列に並べる必要が有るか無いかに分けています。
img2
単純に説明すると以下のような感じです。
  • 「投稿」 ・・・ ブログのようにページが時系列に列べられて管理され、カテゴリーやタグなどで同じものを列べて表示させるアーカイブが用意できるページ。
  • 「固定ページ」 ・・・ 会社概要やお問い合わせなど、時系列に並べる必要が無く、メニューの決められた位置に固定させるようなページ。

ちょっと複雑ですが、公開後も増やしていくページの場合は「投稿」内容の修正を行うだけの場合は「固定ページ」と考えると分かりやすいのかなと思います。

一般的なWordPressサイト

WordPressサイトのページデザインはテーマと言われるプログラムで管理されていています。
標準で用意されているいくつかのテーマの他に、下のように管理画面上からWordPress公式サイトに保存されている無数のテーマから自由にダウンロードして利用する事が可能になっています。
img4
書店などに並んでいるWordPress本は、この公式サイトにあるテーマを利用してウェブサイトを作るやり方の紹介がほとんどで、ちょっと高レベルの本では自分でテーマをつくる方法の紹介になっています。

しかし、企業などのウェブサイトになると企業イメージにあった高いデザイン性が求められます。
オリジナルデザインのウェブサイト全体をWordPressテーマとして用意するのは結構大変なんですが、実際にはページ内容の更新をすることがほとんど無い場合がよくあります。

他にも、お知らせの他にスタッフブログや商品紹介ページなど、目的・機能・デザインが違うタイプの更新が必要になる場合や、PDFファイルなどを定期的に増やしたいがダウンロードページは一つにまとめておきたいなど色々なケースが出てきます。

そういったウェブサイトごとの要求を満たしつつ、WordPressの管理画面はできるだけ分かりやすくシンプルする事も重要。

毎回WordPressをどう使うのがこのウェブサイトにはベストなのかを考え、出来るだけ効果的なWordPressの作り方で使い分けをしています。

お知らせなど一部だけWordPress

まず最も小さくWordPressを使う方法として、ウェブサイト全体は静的なHTMLファイルとして作成しますが、更新が必要なお知らせなどの部分だけをWordPressで用意し、トップページなどに数件の新着を表示する機能を追加する事があります。
img5
お知らせの更新に必要な機能だけに制限させるので、無料ブログサービスやSNSの更新と同じ程度に誰でも使えるようなシンプルな管理画面を用意することができ、オリジナルデザインでも最小限のコストで収めたい時などに有効かと思います。

お知らせなどに加えて事例や商品紹介などもWordPressで管理

ブログなどでは必要なカテゴリーのチェックを入れてもらうなどの対応で表示を分ける方法もありますが、この方法だと管理画面が複雑になってしまいます。

複数の商品写真や説明文などが必要で入力ミスを減らしつつ、できるだけ更新しやすくするために「カスタム投稿」「カスタム分類」「カスタムフィールド」などの追加機能を加える事があります。
img6
専用の更新機能を用意する場合、十分な打合せや検討を行った上で作り始めるのはもちろんなんですが、公開直前や公開後に写真サイズを制限が必要になったり、掲載順番の変更、予定していなかった項目の追加などの調整や変更が発生することはどうしてもあります。
その場合に必要な修正が速やかに加えられるような柔軟な作りも大切ですね。

全体をWordPressにしつつも普通のページを一部入れる

意外と知らない人もいるのですが、WordPressサイト内に静的なHTMLファイルがある場合は実際のHTMLファイルの方を優先して表示させます。

どうしてそうなるのかと言うと、ウェブサイトにアクセスがあった場合、そのURLに該当する場所のファイルにアクセスを試みます。しかし、該当のファイルがないと通常はエラートとして表示されるのですがWordPressではそこで内部データベースをチェックして用意されたHTMLファイルのデータを用意して表示してくれることになります。
img1
例えばWordPressをインストールすると直下にreadme.htmlというHTMLファイルがあります。
そんなことは通常しませんがWordPress管理画面の中でパーマリンク設定を調整してreadme.htmlと言う固定ページを作成しても実際にあるreadme.htmlが表示されることになると思います。
(このreadme.htmlはWordPress本体のアップデートと共に更新されるのでファイルを削除しても復活します。)

これを知っていると完全に別デザインのランディングページなどが必要なった場合などで、わざわざWordPressテーマファイルに手を加えなくても簡単にページを用意出来ます。
また、ランディングページが不要になった時はファイルを削除することでWordPressがページがない場合の処理を行ってくれるので安全に運用することが出来ます。

WordPressの中に複数のWordPressを入れる

通常はWordPressのカスタム投稿やテーマ設計でほとんどの事は対応できるのですが、WordPress管理画面を運用する上で分けたい場合や、ウェブサイト内に擬似的に別のウェブサイトを運用したいなどデザイン・機能的に大きく変わる場合があります。

単純にWordPressを複数インストールする方法もありますが、実は複数のWordPressプログラムをインストールしなくてもネットワークサイトまたはマルチサイト機能といわれる方法でWordPress内で擬似的に複数のWordPressを用意する方法もあります。

この場合、WordPressアップデートも一括管理でき、異なるWordPressのデータを表示させるやり方もあり便利ではありますが、運用中のWordPressを後からネットワークサイト化すると不具合を起こす可能性が高く、一部対応していないプラグインなども有るため十分な検証を行って用意する必要があります。

制作側から見たWordPressを使うメリット

そんな色々な使い方ができるWordPressですが、最大のメリットは必要な追加機能をプラグインとして比較的簡単に追加できること。そして必要な管理画面を用意する必要が無いことです。(使いやすく安全な管理画面を用意するのはかなり大変な作業なんですよ)

また、定期的なアップデートにしっかりと対応させることで安全に運用出来るようにすることも大切です。
そのためにアップデートで問題が発生しないような作り方をするように注意しています。

運用側から見たWordPressを使う際の注意点

パスワードの管理と必要なアップデートをしっかりと行えば、基本的にはWordPressは安全に運用できます。

ここ数日WordPress関係で多数の改ざん被害のニュースがあり、もしかすると「やはりWordPressはダメだね」と感じた人もいるかもしれません。
しかし、これは間違いで実際には他のCMSでも同じようなトラブルの可能性は必ずあります。

自動車でリコールがよくあるように不具合や問題が全くないモノを作るのは不可能です。
また、スマートフォンの普及など変化に応じた対応は絶対に必要になってきます。

今回の改ざん被害ケースの多くは将来に向けたWordpressの追加機能部分で問題があったのですが、改ざん被害が発生する以前からWordpressコミュティの一部メンバーとレンタルサーバー各社などが水面下で監視・準備を行ってくれていました。

WordPress4.7.2 セキュリティーリリースの裏で起こっていたお話
https://twitter.com/i/moments/826971421427445763


最後に

一般利用者の方が気にされる必要は本当はないのですが、Wordpressが無料でこれらを実現していることは凄いことです。

ウェブ制作をしていると正直Wordpressだけに依存しすぎるのも良くないなと考える時もありますが、今回のブログを書いていてWordPressの魅力はWordPressコミュニティ全体の力が非常に強力な事だと改めて感じました。

Snapseedアプリを使って自分好みにの写真を編集してみよう!!〜 ツール編 〜

araki
2017/02/07
閲覧所要時間:約6

はい!みなさんおひさしぶりです!!

日々の猫背のおかけで重度の肩こりに悩まされ、
それを改善しようとバランスボールに乗りながら業務に励み、
結局1週間ちょっとで断念してしまった荒木でぇ〜〜〜〜〜〜〜〜〜〜す!!!!!!

2017年になり始めてのブログの担当がまわってきましたよぉ〜〜〜〜〜〜〜〜〜!!!!!!!!

っということで「あけましておめでとうございます。」m(_ _)m
今年もどうぞよろしくお願い致します。

話は変わりますが、最近特にこの生まれながらの天パのおかげで、
いろいろな人に覚えていただくという場面に遭遇することが多くなってきましたねぇ〜〜〜

嬉しいことですね〜〜〜〜〜〜

・・・・・。

そんなことはどうでもいいんです!!!!!

みなさん前回僕がInstagramについて書いた記事を覚えていらっしゃいますでしょうか・・・・。

片手で持てるiPhoneをわざわざ両手で握りしめ、
何度も何度もしつこいぐらいにスクリーンショットを撮って
完成させたあの記事のことを・・・・・・。

もぉそんな記事のことなんか1mmも覚えてないよっていう人のために、
一応ご紹介だけでもさせてやってください・・・・。(._.)

そして忘れないでやってください・・・・・。

これから始めるInstagram(インスタグラム)〜 基本編 〜
https://www.fvs-net.co.jp/blog/11818
さてさて前置きが長くなってしまいましたが、
さくっと機能を紹介していきますね!!!

まずはじめに

ひとまずこのアプリをダンロードしないことには話になりません!!!!!!
っということでひとまずこちらのアプリをダウンロードしましょう!!!!!!!

Snapseed
Snapseed
開発元:Google, Inc.
無料
posted with アプリーチ
ダウンロードが完了しアプリを立ち上げてみると下記のような画面が表示されます。(今回はiPhoneの画面でご説明します)

snapseed-1
アプリを開きどこでもいいので任意の場所をタップします。

①「端末から開く」→すでに撮りためた写真を選択することができます。
「カメラ」→カメラを起動し撮影することができます。
「最新の画像を開く」→その名の通り最近追加された画像を開くことができます。

② ①で選択した写真でよければ右上の「使用」をタップします。

IMG_6931
次に上記のように編集画面のホームが表示されます。

①別の写真を開きたい場合はこちらの「開く」から再選択ができます。
②「保存」「コピーを保存」「エクスポート」の3種類の保存方法が選択できます。
③編集をやり直したり編集した内容を確認することができます。
④Facebook、Twitter、Instagram、Pinterest、Tumblrなどの様々なSNSに連携しており編集後すぐにアップすることが可能です。
⑤こちらから実際に画像にフィルターをかけたり、色合いなどの編集を行います。

snapseed-2
このように色合いからぼかし、画像の変形、テキストの追加、フィルターなど、
本当に細かく調整できるようになっております。

今回はツールとフィルターがたくさんありますので、
まずツールの方から機能を紹介していきたいと思います!!!!!
(フィルターについての説明は次回ご紹介します♪)

その前に・・・・。

snapseed-3
基本的全てのツールやフィルターで上下にスライドさせることで他の調整する項目へ切り替えたり、より細かい調整を行うことができますので必ず覚えておきましょう!!!

またこちらのアプリの中で出てくる「コントラスト」や「アンビアンス」・・・・と様々な専門用語が出てきて聞くだけでかなり難しそうというイメージがあるかもしれませんが、もぉこの際様々な用語が飛び出しますが特に覚える必要はございません!!!!!

実際に触って自分好みの編集ができればそれでOKなんですd( ̄  ̄)

なので今回は余計な説明ははぶき、

「 実際に触ってみると写真はこういう風に変化するよぉ〜〜! 」
「 自分のちょうどいいところを見つけてねぇ〜〜〜!!! 」

っということだけざっと実際の画面でご紹介していきたいと思います。

画像調整

明るさ

snapseed-4
ん〜僕は必ずと言っていいほどこの明るさはいじりますね( ̄^ ̄)ゞ

なんてったって時には写真を撮ったあとに「あぁ〜〜〜あと少し明るく撮っておけばよかったぁ〜〜〜」と
自分の撮影技術を責めてしまう人も中にはいることでしょう・・・。

僕もその中の一人です。
こんな調整しなくてもいいような撮影技術を身につけようと思う今日この頃・・・・・・_φ( ̄ー ̄ )

コントラスト

snapseed-5
 

彩度

snapseed-6
 

アンビアンス

snapseed-7
 

ハイライト

snapseed-8
 

シャドウ

snapseed-9
 

色温度

snapseed-10
 

写したものによって色温度を調整するとより雰囲気が出るかも・・・・・。

ディティール

snapseed-11
 

切り抜き

snapseed-12
 

回転

snapseed-13
 

変形

snapseed-14
 

ホワイトバランス

snapseed-15
先ほどご紹介した「色温度」と結構似ていますね!!
もぉこれもお好きな方をお使いください!!!!

 

ブラシ

snapseed-16
 

部分調整

snapseed-17
これも結構便利ですよね〜♪
「この箇所をピンポイントで少し明るくしたい!!!!」っという時に活躍しますね( ̄ー ̄ )

 

シミ除去

snapseed-18
 

周辺減光

snapseed-19
これも僕はたまに使いますよ〜〜〜〜〜〜♪
「なんかこの部分だけをちょっと強調したいなぁ〜」っていう時に使ったりしますね♪

 

テキスト

snapseed-20
 

カーブ

snapseed-21
 

こちらは2017年2月1日頃にアップデートでつかされた機能で、
Photoshopをお使いの方にはお馴染みのトーンカーブ機能と同じように、
写真の色調を調製することができます!!!

最後に

いかがでしたでしょうか??
ささっと説明がてら実際の画面をお見せしましたが次回は
「もっと写真に変化をつけたい!!」
っという方のためにフィルターのご紹介をいたしますので、
どうぞお楽しみに〜〜(^o^)/

あっ!!!
「こういう体操が肩こりにきくよぉ〜〜〜〜〜!」
「こういう道具をつかうと多少は肩こり和らぐよぉ〜〜〜〜!!!」
っという情報をお持ちのかたはぜひフロンティアビジョンの荒木までご連絡ください( ̄^ ̄)ゞ

それではまたいつの日か♪

改名しました! SAWAMICHIOです!!

sawamichio
2017/01/27
閲覧所要時間:約1

sawamichio

構想3年。

年も新たに心機一転、
今年一日から、名をソ○ダから => SAWAMICHIOと改めました。
クリエイターのSAWAMICHIOです。

旧名の頃お世話になったクライアント様、そして社員の皆さん、
誠に勝手に、そして突然の変更に、ご迷惑をおかけしますが、何卒よろしくお願いします。

突然の改名にも、快く承諾してくれた渡邉社長には仏を見ました。

名は愛してなんぼですので(?) 末長くお付き合いください。

また、改名したのはいいのですが、
皆さん慣れずによく旧名で呼ばれる事があります。

安心してください!
僕も慣れずに振り向いてしまいます!!

そして今年に入り、新しくなったのは名前だけではありません。
先日やっと、Appleからお届け物が届きました↓↓↓↓

お届け物の中身とは・・・

ブラッキー [MacBook Pro Late 2016]

そう、 ヌゅ〜Macです!!
Touchbar(タッチバー)です!
スペースグレイです!

かるく1分間の合掌のあと、
開封の儀とさせて頂きました。

現在調教中で、実戦デビューはまだですが、
新しい名前と新しいMacで2017年を駆け抜けたいと思います。

皆さん、今年1年よろしくお願いします。


SAWAMICHIOでした。


2つの音楽イベントに行ってきました♩

yabushita
2016/12/17
閲覧所要時間:約3

こんにちは!
音楽がないと生きていけない系女子のヤブシタです!
1 私は休みの日は専ら(休みの日ではなくても)、音楽を聴いて過ごしているのですが、
(こんなイラストのように優雅ではありませんが;;)
先日熊本城の二の丸広場でこんな2つのイベントがあったので行ってまいりました!
興奮して良い写真が撮れなかったので、イメージイラストでお楽しみくださいm(_ _)m

『GACHIスペシャルin熊本城』

浜崎貴司 集まれ!オールクマモトGACHIスペシャルin熊本城
http://www.bea-net.com/gachi/


FLYING KIDSのボーカルでもある浜崎貴司さんが地震から復興中の熊本を励まそうと音楽イベントを開催してくださったんです!しかも入場料は無料で!
FLYING KIDSの歌もよく聴いてる私としては、このニュースを見た瞬間「フォ!」っと謎の声が出てしまいました(笑)↓この表情
2 もう、これだけでも行く気満々なのに出演者が凄いのです!!!
【浜崎貴司、斉藤和義、吉井和哉、藤原さくら、トータス松本】
すごくないですか??!!!?!?!
特に今年再結成したTHE YELLOW MONKEYのボーカル吉井和哉さんが来られるということで
もう鼻息が荒くなりましたよ!!!(笑)
このイベントに行かないという選択肢がない!!!と確信しましたね(笑)↓この表情
3 ということで、斉藤和義さん好きの友達を誘い行ってきました。↓こんな感じで
4 見事、前方パイプ椅子席(3,000席限定)が当選したので意気揚々と二の丸広場に着いたら、見渡す限りの人!人!人!
熊本にこんな人っているんだ!と思いました(笑)
パイプ椅子席は当選したものの、席は自由だったので、開場した瞬間、血眼になって空いてる椅子を探しました(笑)

開演後は出演者の皆さんが有名な曲からカバー曲まで多岐にわたり計21曲歌われました♩
それはそれは、かっこよくて幸せな時間でした*・゜゚・*:.。..。.:*・’(*゚▽゚*)’・*:.。. .。.:*・゜゚・*↓この表情
5 友達とも「かっこよかったねぇ~~~」「ねぇ~~」←この言葉を家に着くまで何回も言ってました(笑)
来場者数はなんと計2万人だったということで、とても素敵な復興ライブでした♩

『熊本で逢いましょう』

img_1074 ↑開演前です

涙誘う名曲、復興エール スターダスト・レビューが無料公演
http://this.kiji.is/175415995499167746


スターダストレビューの皆さんが11月末に熊本地震復興支援の無料ライブを開催されました!
スタレビの皆さんは4月16日に熊本でのライブ予定があり、その日に本震が来たので中止になりましたが、そこから全国ツアーなどで募金を呼びかけ、義援金1千万円を熊本市に寄付されたそうです。

オープニングでは熊本出身の舞花さん、中田裕二さんも出演され、とても和やかなムードでした(^O^)↓こんな感じで
6 もちろんスタレビのライブは熱気に包まれており、老若男女が踊り歌い楽しいステージでした!
また、ボーカルの根本要さんの声がとても美しくて涙が出たのですが、歌と歌の合間の要さんの自虐ネタを含めるMCがとても面白くエンターテイナーだなぁ、、、と感銘致しました。↓この表情
7 個人的な感想として、私がスタレビの中で一番好きな歌も歌ってくださいましたし
前々からライブに行きたいと思っていたので、とても嬉しかったです★

最後に

img_1079 今回2つのイベントに参加しましたが、どちらも本当に行ってよかった!!!と心から思いました。
出演者の皆さんの気持ちと会場がひとつになれた気がします。
また、遥々北海道から来ているお客さんも居て、歌の力ってすごいなと改めて感じました。
今後もこういう機会があれば是非行きたいです♪(´ε` )

年末にかけて様々な音楽番組もありますし、皆様も素敵な音楽ライフを過ごしてみてはいかがでしょうか?♪( ´θ`)ノ
以上、自己満ブログでしたm(_ _)m

業務で注意している3つのこと【コーディング編】

kawaguchi
2016/12/05
閲覧所要時間:約5

こんにちは、川口です。
今年も早いもので残り一カ月ですね!
一年間どうでしたか?楽しみましたか?

僕は最近 緑仙峡 に紅葉を撮りに行ったのですが色づいた紅葉を見れなかったことが心残りです…
autom-1 現地の方に来るのが一週間遅い!と言われてしまいました 笑
去年も五家荘に行って、満足いく景色を見れなかったのでかなり悔しいです…



年末にかけてだんだん忙しくなってきましたが、
お陰様でありがたいことに1年中忙しい気がしております。

そんな中、コーディングする際とくに注意していることを今回の記事にしたいと思います!
(ブログのネタが無くなってきました 笑)

コーディングで注意している3つのこと

※タイトルには「コーディング編」と書いていますが、コーディング編以外ございません 笑
  • ①テキストに関する情報
  • ②間隔(余白)について
  • ③CSSで表現
 

①テキストに関する情報

textinfoCSSのプロパティーでいうと
① font-size: 36px;
② line-height: 1.667;
③ letter-spacing: .005em; です。

①のfont-sizeはそのまま36pxにすればいいですが、
②と③については少々面倒な計算が必要です。
line-heightの計算方法
line-height = 数値 ÷ フォントサイズ なので
60px ÷ 36px = 1.66666667 です。
letter-spacingの計算方法
letter-spacing = 数値 ÷ 1000 なので
5 ÷ 1000 = 0.005 です。
ですが、毎回手動計算していては効率が悪すぎるので
sass を使用している前提ですが function や mixin で計算するようにします。

@mixin
line-heightの自動計算
@mixin line-height( $psd-size , $font-size ) {
 line-height: $psd-size / $font-size;
}
●leffter-spacingの計算
@mixin letter-spacing( $trakking ) {
 letter-spacing: $trakking / 1000 + em;
}
 

これで早く簡単に計算できるようになります。
他にも確認していることはありますが、計算が必要な部分だけ紹介しました!

 

②間隔(余白)について

次は画像やテキスト、コンテンツの間隔を計算するときにどうしているかです。
どれだけ正確に、PSDとほぼ同じ間隔にするかが結構難しいことだなと最近感じています。
letter この場合 緑の四角 と テキスト の間隔を図る時は 選択範囲ツール を使ってしっかり図ります。
47px と設定したいところですが実際にブラウザで表示すると47px以上の間隔が空いてしまいます。
これはテキストが持つline-height等の間隔 + 47px ということになるのが原因です。
なので少し小さくして35pxなど、あとは目分量で設定するしかなさそう….なのではじめは大体で設定しコーディングしていきます。
そして最終段階で僕が必ずやっていることが、px単位で調整することです。
目分量で正確にするスキルは僕にないので、あるモノを使います。

そのあるモノが、ブラウザを半透明にしてくれる「Afloat」です!
これは ブラウザを半透明にすることができる優れもので ブラウザをPhotoshopの上に直接重ねて細かく調整しています。
これで完璧!
と思ってましたがやはりブラウザで若干違う場合がありますがこれは恐らくスキル不足です..
どんなものかは下の参考リンクをご覧ください。

Afloat参考
http://fatherlog.com/translucent-window-mac-app-afloat/

※ダウンロードページが少々怪しいですが色んな方がブログに掲載されているので大丈夫です 笑

また、Mac OSX El Capitan からAfloatがどうやっても使えないので
代用として「Helium」 を使用しています。
こちらは Helium 自体が簡易ブラウザとなって半透明になりますが、開発者ツールが使えないです…

Helium
https://itunes.apple.com/jp/app/helium/id1054607607?mt=12


一見、作業が遅くなるような気がしますが、特に遅くなった感じはせず、このおかげで目分量の精度が上がった気がします 笑
コーディングとデザインが分業のフロンティアビジョンでは、コーダーが気にならなくてもデザイナーは少し違うと気になると思います。
なので当たり前ですが、 デザインと同じ を心がけてコーディングしています!
(アプリに頼らなくてもできるようになりたい….)

 

③CSSで表現

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-10%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-11 ストライプやドット柄、市松模様のパターンは画像で対応していましたが、CSSで表現可能と分かったのでブラウザの対応は確認しながら最近は使っています。

購入していただいた本
fullsizerender CSSシークレット ―47のテクニックでCSSを自在に操る
http://amzn.asia/8T4ZyVu

にはいろいろテクニックが紹介されていてとても面白いです!(まだ半分くらいしか読めてないです…)

 

マニアックな話になりましたが、いつもコーディングで注意していることを書いてみました。
まだまだ模索中な部分もあるので、他にいい方法があればぜひ教えていただきたいです!
そして来春には新しく社員も増えるので少しでも参考になればいいなと思います。

 

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介