駆け出しエンジニア、WebメディアKAI-YOU開発部に仲間入りしました

f:id:KAI-YOU:20200220192617p:plain はじめまして! KAI-YOU開発部新米エンジニアのchiha(@chiha_fukuoka)と申します。福岡出身です。

2020年2月から主にバックエンドを中心とした開発に携わっています。

実は私は…

エンジニアとは言ったものの、実は生物系の学部出身で、成分分析とか化学反応みたいなWebエンジニアリングとは全然関係ないことをやってました。

大学卒業してからプログラミングに興味を持ち、独学からプログラミングスクール的な場所を経て、KAI-YOUに入社しました。

入社して2週間が経過したので、入社までの簡単な経緯と、入社してからのアレコレを振り返っていこうかなと思います。

入社前の経緯

KAI-YOUを知ったのは2019年11月ごろでした。

paizaというエンジニア転職とプログラミングの学習サイトで知り、面白そうな会社だな〜と思って応募しました。

選考の流れとしては面接が2回、その後開発課題の提出。 2回の面接を経て、出された課題は

VagrantまたはDockerで環境構築、CakePHPで任意のTwitterアカウントの画像を取得、保存するアプリを作る
完成したらGitHubリポジトリ のURLを送る

という内容。

CakePHPVagrantにDocker、どれも触れたことがない。 なんならPHPを書いたこともない。 私は頭を抱えながら、 Google検索の力を借りてなんとか仕様通りに動作するアプリを作りました。 (エンジニアに必要なのは検索力とか言いますが…)

そんなこんなで無事(?)にKAI-YOUの一員として一緒に働かせて頂くことが決まりました。

入社1週目

入社初日は諸々の説明を受けた後に環境構築。 メンターのキャベツこうべ(@cabbagekobe)さんに教えてもらいながら、なんとか構築しました。

以降はKAI-YOU.netのコードをひたすら読んでいました。 実際に動いているサービスのコードを読むのは初めてで、分からないことだらけでしたが、隣のキャベツこうべさんとGoogle検索に助けられながら読み進めました。 未知のコードを読むのって楽しいですね。

ついでにコードリーディングの一環として、社内Slackのゴミ捨て当番通知botの改修をしました。

f:id:KAI-YOU:20200221130023p:plain
KAI-YOUのゴミ当番はルーティン制です

KAI-YOU新メンバーをゴミ捨てローテーション対象に加え、ゴミ捨て担当の選出をランダム化する機能を実装しました。 人生で初めてのエンジニアとしての実装となったので、botが実際に呟くまでめちゃくちゃドキドキしました(笑)

入社2週目

2週目の最初の仕事は、とある部分の記事表示ロジックの拡張でした。

初のバックエンドの仕事ということで、バックエンドのみで完結する機能拡張。 主にCakePHPのモデルの処理周りに触れていく感じの作業になりました。

元々書いてあるコードを参考にしながら自分なりに新しく処理を書いたのですが、そもそも参考にした処理を使うだけでよかったというオチでした…。 ということで、最初に書いたコードが原型を留めないくらいの修正を経て実装完了となりました。

本番に反映して、仕様が社内に通知されているのを見るとちょっと誇らしくて嬉しかったです。この嬉しさを忘れないようにしたい

次の仕事は、「投稿記事の管理画面での入力項目の追加」でした。

データベースへのカラム追加や実際の記事データに触るということで、震えながら作業していましたが、こちらも検索とキャベツこうべさんに助けていただいて実装することができました。

現在

入社3週目の現在は、フロントにも触れていこう!ということでJavaScriptを絡めた非同期での処理の実装に取り組んでいます。 なんとかPHP側のAPIができたので、現在JavaScript側での処理を書きはじめました。(絶賛苦戦中です…)

まだまだ知らない事だらけですが、少しずつ身についてきている実感はあるので、これからも頑張っていこうと思います。 (開発者ブログなのに成長日記みたいになってしまった…)

次の記事は開発者ブログらしく、技術的な記事を書けるように精進していこうと思います。

以上!新米エンジニアのchihaでした!

2020年注目のトレンド Neumorphism とは

はじめまして、KAI-YOU開発部デザイナーのPENTAGRAM(@PENTVGRVW)です。 昨年、新卒入社した地元北海道のWeb制作会社を退職し、2020年1月から開発部としてKAI-YOUにおけるサービスのデザインなどをお手伝いさせていただいております。

前職では受託メインでグラフィックデザインやWebデザイン、撮影業務を主に担当していました。個人ではeスポーツ系のイベントや大会を主催したり、その時好きなコンテンツと技術を題材にファンアートを制作してSNSに投下する毎日を送っています(早くLJL始まってほしい)
よければTwitterフォローお願いします

今回は2020年のUIトレンドの中でも賛否両論ありますが、個人的に好きな「Neumorphism(ニューモーフィズム)」というUIをご紹介いたします。


Neumorphismとは

f:id:KAI-YOU:20200127185315p:plain
Neumorphismは近年DribbbleやInstagramにおいて注目されている新たなUI手法です。

UIデザインにスキューモーフィズムが採用され始めてからも、フラットデザインフラットデザイン2.0、マテリアルデザインなど様々なUI手法がそれぞれの弱点を補う形で生み出されてきましたが、Neumorphismに関してはその限りではありません。なぜならNeumorphismはスキューモーフィズムが持つ「視認性の良さ」というメリットを放棄していると言われているからです。

UIデザインにとって「直感的でない」ことは致命的であり、多くのデザイナーはそれらを理解していると思います。また、実際にプロダクトに反映した事例が少なく、テストの結果が数字として記録されていないことから足踏みしているチームも多いはず。「UIなのに見づらい、分かりづらいってどうなのよ」と思われる方もいらっしゃると思いますが、そんなNeumorphismにもちゃんと良いところはあるのでご安心ください!


見栄えが良い

誤解されがちですがこれは「視認性が悪い」こととはノットイコールであり、そもそも「良い見た目」でないと界隈では流行りません。実用性がまだ見極められていないのにも関わらず、これだけ多くのデザイナーが制作し、投稿しているところを見ると、改めて興味を引くデザインだということがよく分かります。

f:id:KAI-YOU:20200127182744p:plain
Dribbble - Neumorphism検索結果


今までにない立体表現

フラットデザインマテリアルデザインはシャドウエフェクトを巧みに利用することで、オブジェクトの「浮遊感」を演出し、質感や立体感を表現してきました。その点、Neumorphismはシャドウエフェクトを明暗2つ使い分け、凹凸を表現しています。

制作の都合上、オブジェクトを背景色と同じ色にする必要があるので、コントラスト差がなくボタンやスイッチとしての使い勝手は褒められたものではありませんが、この表現にはそれと天秤に掛けるほどの「真新しさ」があります。

f:id:KAI-YOU:20200128102537p:plain

実装コストがそれほど高くない(はず)

シャドウを2つ使うので他の手法より手間がかかりそうな印象ではありますが、Photoshop等で基礎となる明と暗のシャドウを設定した後、スタイルをコピーすることで他のオブジェクトに対しても流用が可能です。

もちろん、若干の微調整は必要になりますがフラットデザインマテリアルデザインに触れたことのあるデザイナーならそれほど障害にはならないでしょう。

また、実装の際にいくらか検討は必要になりそうですが、有志が作成した(※1)ジェネレーターを利用することである程度の手間は軽減できるかと思います。

非デザイナの方でも気軽に触れるジェネレーター Neumorphism/Soft UI CSS shadow generator

f:id:KAI-YOU:20200127183500p:plain
誰でもNeumorphismを作成できるNeumorphism.io


次世代のスタンダードになり得るか

業界的には今のところネガティブな印象が強いNeumorphismですが、将来性は大いにあると考えています。 ある時を境にガラケーからスマートフォンに主流が切り替わったり、iPhone等の液晶画面も年々大きくなっていくことから、デザイントレンドだけでなくそれを取り巻くデバイス(媒体)環境にも変化があるといえます。

2D上ではいまのところ「BAD UI」とされるNeumorphismも、VR技術やGoogleグラスなどが発展することで視覚情報が自然と2Dから3Dに移り変わり、適応していくかもしれません。

Neumorphismは登場したばかり、まだまだ検証されていない要素がたくさんあります。 何事も試してみることが1番だと思うので、ジェネレーターやソフト上で是非1度Neumorphismに触れてみてください!

参考

uxdesign.cc

uxdesign.cc

わたはるのデザインのリファレンス集

こんにちは。KAI-YOU開発部わたはるです。
ポケモン買いましたがあまり進んでません。バッジ3つ目です。

f:id:KAI-YOU:20191129185525j:plain
キョダイマックスハッコウくんを作りました

今日は私がよく参考にしているデザインのリファレンス集を紹介します。
デザインの勉強を座学としてやったことがなくて、毎日何がいいデザインなのか迷うことばかりです。
そんな私がすがる思いで集めたデザインリファレンス集を今日はご紹介します!自分が今制作したいもの、制作しなければいけないものをこれらのサイトをヒントにして作っていってます。

1.ビジュアルイメージで参考にするサイト

www.pinterest.jp

f:id:KAI-YOU:20191129192549p:plain
Pinterest

デザインの仕事を始めてからたくさん使うようになりました。 Pinterestはボードといういわゆる探した画像をフォルダ分けできるような機能があるのですが、Webとかロゴとか紙ものとか適当に分類して自分が直感的に好きだなと思ったものをポイポイ入れてます。自分の好みがなんとなく分かって面白いです。

2.UIデザイン面で参考にするサイト

collectui.com

f:id:KAI-YOU:20191129192601p:plain
Collect UI

uimovement.com

f:id:KAI-YOU:20191129192612p:plain
UI Movement

UIを考えるときに競合サイトをまず見るのですが、色々と見た末に結局何がいいのか分からないという状況によくなります。そんな時はこの2サイトを見て、今イケてるUIは何か、では今回の発見された問題に対して解決をもたらすと思われるUIはなんなのかを考えていきます。眺めるだけでもなんでこうしたんだろうな〜とか考えるので勉強になりますよ。

3.LPデザイン面で参考にするサイト

muuuuu.org

f:id:KAI-YOU:20191129192620p:plain
MUUUUU.ORG

lp.webdesignclip.com

f:id:KAI-YOU:20191129192631p:plain
Web Design Clip [L]

KAI-YOU開発部は基本的に自社開発がメインの業務ですが、たまにクライアント様からご依頼をいただいてLP制作をやることもあります。(コッソリ)最初にご依頼頂いたときに、必要最低限サイトに記載する情報をまとめた後、似た性質のサイトを探してきて追加したい要素などをクライアントに提案してワイヤーフレームを作ります。

4.バナーデザイン面で参考にするサイト

banner.keizine.net

f:id:KAI-YOU:20191129192643p:plain
バナーデザインアーカイブ

retrobanner.net

f:id:KAI-YOU:20191129192657p:plain
レトロバナー

バナーデザインは正直すごく苦手です。バナーとしてのデザイン、サイトとの整合性、どんな文言がクリックされやすいかなども考えながら作ります。上記のサイトを見て参考にしながら、色んなクリエイティブを作ってみて日々クリックされやすいバナーを目指しています。

5.アイコンデザイン面で参考にするサイト

simpleicons.org

f:id:KAI-YOU:20191129192708p:plain
Simple Icons

thenounproject.com

f:id:KAI-YOU:20191129192717p:plain
Noun Project

アイコンを選ぶときはこのサイトを参考にしています。あるキーワードから連想する自分のイメージとは違うものも出てくることもあるので面白いです。

6.カラーを決める際に参考にするサイト

coolors.co

f:id:KAI-YOU:20191129192723p:plain
Coolors.co

webgradients.com

f:id:KAI-YOU:20191129192732p:plain
WebGradients

自分で決めたカラーがしっくりこない、なんとなくハマらない時にはここを見ます。 メインで使いたい色だけ決めて、後は勝手にカラーをレコメンドしてくれるので楽です。いわゆるノンデザイナーの人にもオススメしたいサイトです。

まとめ

簡単になりましたが、私がよく使うリファレンス集をご紹介しました。インターネット上には非常に優れたリファレンスが多く存在してますね。自分に合うリファレンスを見つけていいデザインを作っていきましょう〜。

それでは、わたはるでした。