超初心者デザイナーがStoryboardを使ってみてよかったなと思ったこと

こんにちは。二年目デザイナーのはなです。

私はドドド文系かつ、今のところ人生でパソコン使ってる時間より紙と絵の具触っていた時間のほうが長いようなアナログ街出身の感覚派ですが、この度「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」というエンジニアさんの言葉により、XcodeのStoryboardを使ってみることになりました。

もちろん私の経験値はそのような状況(かろうじてHTMLとCSSはわかる…)ですので、傍から見ると低い段差に躓きまくりました。

それでもなんとかエンジニアさんからの介護を受けて、アプリのガワだけ作成することができ、「何このソフト…?英語しか書いてない…怖いよ~…」という状況からは脱しました。

こういうかたちのボタンはこういうふうに作れば良いんだよ、というのを理解するのに丸一日かかったりしました。

このボタン一つを苦戦しながら作って、どの画面サイズで見ても破綻していなかったときはとても感動したりしました。

あまりにも初歩的すぎますが、レベルが赤子なので見るものすべてに感動してしまうんですね。

Storyboardできる人は、まあ、一笑に付していただけると幸いです。

Storyboardを使ってみてよかったなと思ったこと

あとからエンジニアさんに細かいデザイン調整のお願いをしに行かなくて済む!

「すみません、ここなんですけど、あと10pxぐらい余白つめてもらっていいですか…」がなくなりました。

全部自分でつけてますからね。

「ここはシステム上これ以上余白詰めるのは難しいです」「そこをなんとか」という工程もなくなりました。

システム上難しいということを踏まえた上でデザインを作ればいいのです。

それが理解できるようになったことは、すごく大きな収穫だったなと思います。

画面の大きさによってどのようにレスポンシブさせるか自分で決められる!

例えばiPhone8の画面サイズで作ったUIデザインについて、5sの時はどこをどういうふうに縮める?iPhoneXやiPadの時はどこをどうやって伸ばす?というのを自分で決められます。

あとからエンジニアさんにお願いして変えてもらうとなると、下手したらAuto Layout付け直しじゃないですか(それも理解できるようになりました。そりゃ面倒くさいですね)

それを最初から自分で指定できるというのは、かなり効率がいいです。妥協もしないで済みます。

標準的なiosアプリのデザインがなんとなくつかめるような気がする!

Storyboardにはiosアプリの標準UIのパーツが元から入っています。

ドラッグするだけで置けます。すごい便利ですね。

逆に、「置けない場所」というのもなんとなくつかめてきます。

そうやって試行錯誤しているうちに、iOSアプリの標準的なデザインが、なんとなくわかってきたような気がします。

まとめ

 Storyboardを触ってみて、「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」という言葉の意味がわかりました。

見た目の微調整が自分で行えるということの素晴らしさを、デザイナーさんなら理解できると思います…

とはいえ、まだ入り口に立った段階ですので、これからも四苦八苦しながらStoryboardくんと仲良くやっていけるよう頑張りたいと思います。

ITエンジニアの種類っていっぱいあるの?

こんにちわ。
リエです。

弊社はシステム開発会社です。
プログラマが数名在籍していて、それぞれ得意分野が違います。
そこでよく聞かれる「エンジニア」の種類と違いについて書こうかと思います。
種類が結構多いので、今回は弊社に関係するエンジニアの種類を抜粋してご紹介します。

そもそもITエンジニアって?

情報処理や情報通信といった情報技術に関する技術者のことです。
ちなみにITとは「Information Technology」日本語で「情報技術」の略です。

・システムエンジニア

システムエンジニアは、コンピューターシステム開発の場面において、設計から開発、テストまでを一貫して計画し進めていく存在です。
エンジニアの中でもオールラウンダーで、クライアントからの要求をまとめシステムの仕様を確定し、それを他のプログラマに伝達する橋渡し的な枠割を担います。

・ネットワークエンジニア

ネットワークエンジニアは、コンピューターネットワークの設計・構築・運用・保守を専門的に行うシステムエンジニアの一種です。
データ通信に関するさまざまな技術(ルーター、スイッチ、DNS、メール、セキュリティなど)に精通した存在です。

・データベースエンジニア

データベースエンジニアは、データベースの設計・構築・運用・保守を専門的に行うシステムエンジニアの一種です。
データベースを扱う様々な製品に精通し、データベース自体の設計や構築だけでなく、運用方法の設計を行う場合もあります。

・サーバーエンジニア

サーバーエンジニアは、サーバーシステムの設計・構築・保守を専門的に行うシステムエンジニアの一種です。
冗長構成、負荷分散の設計、障害対応、障害・セキュリティ対策など、サーバーに関する幅広い業務を行います。

・Webエンジニア

Webエンジニアとは、WebポータルサイトやECサイトなど、Web上での使用に特化したシステムの設計・開発・運用・保守を専門的に行うシステムエンジニアの一種です。
WebサイトやWebアプリケーションなど、Webを通して操作するシステムの開発をメインで行います。

・プログラマ

プログラマとは、一般的には、システムエンジニアなどが作成した仕様書(設計書)をもとに、機能を実装していくエンジニアのことです。
弊社ではそれだけでなく上述した業務全般をプログラマが担っています!(スゴイ)
コーディングだけを行う場合はコーダーとよばれる場合もあります。
(Webデザイナーがデザインしたサイトやアプリケーションなどを、ユーザーがWeb上で閲覧・動作させることができるよう作り上げる職種のことです)
対応するシステムによって「アプリケーションプログラマ」や「Webプログラマ」など、使用する開発言語によって専門的に分化されています。
 
参考サイトhttp://proengineer.internous.co.jp/content/columnfeature/3108#section209

 
まだまだ色んなITエンジニアは存在しますが、今回はこのへんで。
まさに多種多様。興味がある方はぜひ弊社までm(_ _)m

ブラウザのサウンド出力先を変更したい!

近頃、ブラウザのタブを複数開いて動画や音楽を同時再生することが増えてきました。

言うまでもないことですが、同時再生なので音がごちゃごちゃしてます。

せめてイヤフォンやヘッドフォンで聴いているときはタブごとに音を左右に割り振りたいと常々思っていました。

しかし、ChromeやFirefox、Edgeといったメジャーなブラウザには音を調整するミキサーがついてないどころか、デフォルトのサウンドデバイスから変更するような設定がそもそもありません。

そんな設定あったとしてもサンプルレートやらビットレートで色々がアレなんだろうなぁ…もう駄目だぁ…おしまいだぁ…

と諦めてかけていたところ、Javascript の Web APIs を使えば前述の音の割り振りが実現できそうなことに気付きました。

のでやってみました。

image
音声の出力先を選択できるようにした

これだけでセレクトボックスから選択したデバイスでオーディオが再生されるようになりました。仮想オーディオミキサーも試してみましたが問題なく動作します。

躓いた点は、

  • ラベルが取得できない場合、deviceIdでしか判別できない。
  • 音声に加えてマイクの使用を許可しないと、デバイスの許可が取得できず出力先を切り替えることができない。
  • Macの場合はプライバシー保護機能のためアプリの許可も必要かも。

割とセキュリティ厳しめです。

気が付いたら勝手にマイクがONにされて独り言が全世界に公開とか、いつの間にか催眠音声を聞かされてるとかすると怖いので仕方がありません。

それでも、Audio要素ごとにデバイスを設定できるのは予想以上でした。

出力側が対応しているかの問題がありますが、7.1chでも20chでも設定上可能です。

2つの曲を聴きながらテンポを合わせたい人や、イヤフォンの上からヘッドフォンをする人、左で雑談、右で焚き火の音を聴きながらゲームする人も安心です。平和は守られた!

しもやけ対策2019

こんにちわ。
リエです。

昨年、寒さで足がしもやけになってしまいました。
オフィスって底冷えしますよね(´・ω・`)

わたしはヒールが好きなのでパンプスをよく履いていたのが原因だと思われます。あと冷え性なのも関係あるのかなぁ。

しもやけなんて小学生ぶりだったので、最初なんでこうなったのか全然分からず自分の症状をGoogleで検索しまくりました。(ちなみにドラッグストアで売っている薬で治りました)

そんな過去を踏まえて、今年は絶対にしもやけにならないぞと早々に対策を練りました。しもやけ本当につらかったんです。。

要は足を冷やさなければいいというわけで、オフィスではSUBUという冬用のサンダルを履いています。
https://www.subu2016.com/archive

中が起毛でふかっとしていて、外はナイロンで保温性があり、ダウンのような感じです。靴底も厚みがありしっかりしているのでちょっとそこまでなら外を歩くことも可。※SUBUの回し者ではありません。

今のところしもやけにはなっていません。
この冬わたしの足はSUBUが守ってくれそうです。

しかし足元冷える問題はどうしたらいいんでしょうね〜。
スカートをやめるとかタイツのデニールを上げるとかすればある程度は解決するでしょうけど、好きな服は着たいし。
でも今年の冬はSUBUのおかげで足があったかいしむくみにくいしで今のところいい感じなので、これで越冬します。

高品質デザインツール Canvaを使ってみた。

こんにちは。デザイナーのMです。
今回は無料で美しいグラフィックデザインを作成することができる「Canva」というサービスを使ってみました。

Canvaとは?

CanvaはPCブラウザ、アプリ(iOS/Android)で利用できる、無料グラフィックデザインツールです。

グラフィックデザインを無料で簡単作成 – Canva
https://www.canva.com/ja_jp/

豊富なテンプレートから用途にあったデザインを選んで、カスタマイズするだけで高品質なグラフィックデザインを誰でも簡単に作ることができます。

わかりやすいホーム画面

登録すると最初に表示されるホーム画面です。
・デザインを作成
・あなたのデザイン(作成済みのデザインがある場合のみ表示)
というシンプルなダッシュボードで、とてもわかりやすいです。

デザインテンプレートも
・ソーシャルメディア
・Instagramの投稿

などの各種SNSに対応した最新のテンプレートから、
・店舗のメニュー表
・パンフレット
・商品券
などの印刷物のデザインテンプレートまであって種類がとても豊富です。

今回はこのブログ記事のヘッダー画像を作成してみながら、Canvaを使ってみようと思います。
※記事中のスクリーンショットがPCブラウザのものになるので、アプリ版とは多少違う部分があるかもしれません。ご了承ください。

デザインを作ってみる

それでは早速ですが、テンプレートからデザインを作ってみようと思います。
ホーム画面のテンプレート一覧から「Blogバナー」をクリックします。

ブログで一般的に使用されるサイズで真っ白なアートボードが表示されました。
画面左側に、メニューとデザインテンプレートが表示されています。右下に(無料)と書いてあるものは無料で利用できます。
それ以外もデザインの背景にCanvaロゴの透かしが入りますが利用することができます。この透かしは有料で削除することも可能です。

今回は無料のテンプレートを選んでみました。

このままでも普通に利用できるオシャレなテンプレートになっています。
このテンプレート上の文字をクリックするとすぐに編集することができます。

多数のフォントや文字色の変更もツールバーからすぐに変更することができます。非常に直感的で初心者の方でも使いやすいのではないかと思います。

背景画像も豊富な素材が用意されていて自由に差し替えることも可能です。自分の持っている画像を挿入することもできます。
また簡単な写真フィルターなども用意されており、ちょっとした画像編集も可能になっています。
フォントの組み合わせもデザイナー顔負けの色んなパターンが用意されているので、どれにしようか悩むのもいいかもしれません。

あっという間にバナーの完成!

数クリックでバナーが出来てしまいました。時間にして5分もかからなかったと思います。
作成したデザインは、pngやjpg、PDFでダウンロードすることができます。
いつもはIllustratorやPhotoshopでデザインを作成していますが、簡単なデザインラフや今回のブログなどで利用する記事内の画像などはCanvaで作るのでも十分かもしれません。


また機会があれば、ぜひ使ってみようと思うことのできるサービスでした^^

グラフィックデザインを無料で簡単作成 – Canva
https://www.canva.com/ja_jp/