KAI-YOU Lab.

フィード

記事のアイキャッチ画像
KAI-YOU Premiumのトップページリニューアルを振り返る
KAI-YOU Lab.
こんにちは、KAI-YOU でUIデザインを担当しているPENTAGRAM(@PENTVGRVW)です。お久しぶりのブログ更新になります💪 KAI-YOUが運営している月額制サービス『KAI-YOU Premium』では、2021年1月にトップページのリニューアルが行われました!(※その際のお知らせはこちらから) ある意味サービスの顔とも言えるトップページのリニューアルにはアイディア出しからリリースまでに約3ヶ月ほどかかり、(当時)開発部以外からのメンバーにも参加してもらったりとかなり大きなプロジェクトでした。 今回は、そんな紆余曲折あった3ヶ月間をざっと振り返ろうと思います。 なぜリニューア…
3年前
記事のアイキャッチ画像
駆け出しエンジニア、WebメディアKAI-YOU開発部に仲間入りしました
KAI-YOU Lab.
はじめまして! KAI-YOU開発部新米エンジニアのchiha(@chiha_fukuoka)と申します。福岡出身です。 2020年2月から主にバックエンドを中心とした開発に携わっています。 実は私は… エンジニアとは言ったものの、実は生物系の学部出身で、成分分析とか化学反応みたいなWebエンジニアリングとは全然関係ないことをやってました。 大学卒業してからプログラミングに興味を持ち、独学からプログラミングスクール的な場所を経て、KAI-YOUに入社しました。 入社して2週間が経過したので、入社までの簡単な経緯と、入社してからのアレコレを振り返っていこうかなと思います。 入社前の経緯 KAI-…
4年前
記事のアイキャッチ画像
2020年注目のトレンド Neumorphism とは
KAI-YOU Lab.
はじめまして、KAI-YOU開発部デザイナーのPENTAGRAM(@PENTVGRVW)です。 昨年、新卒入社した地元北海道のWeb制作会社を退職し、2020年1月から開発部としてKAI-YOUにおけるサービスのデザインなどをお手伝いさせていただいております。 前職では受託メインでグラフィックデザインやWebデザイン、撮影業務を主に担当していました。個人ではeスポーツ系のイベントや大会を主催したり、その時好きなコンテンツと技術を題材にファンアートを制作してSNSに投下する毎日を送っています(早くLJL始まってほしい) よければTwitterフォローお願いします 今回は2020年のUIトレンドの…
4年前
記事のアイキャッチ画像
わたはるのデザインのリファレンス集
KAI-YOU Lab.
こんにちは。KAI-YOU開発部わたはるです。 ポケモン買いましたがあまり進んでません。バッジ3つ目です。 キョダイマックスハッコウくんを作りました 今日は私がよく参考にしているデザインのリファレンス集を紹介します。 デザインの勉強を座学としてやったことがなくて、毎日何がいいデザインなのか迷うことばかりです。 そんな私がすがる思いで集めたデザインリファレンス集を今日はご紹介します!自分が今制作したいもの、制作しなければいけないものをこれらのサイトをヒントにして作っていってます。 1.ビジュアルイメージで参考にするサイト 2.UIデザイン面で参考にするサイト 3.LPデザイン面で参考にするサイト…
4年前
記事のアイキャッチ画像
DJの選曲にもレコメンドがあると楽じゃないか?それTraktorでもできませんかね!? Vol.3
KAI-YOU Lab.
はい!KAI-YOUエンジニアのコウベ(@cabbagekobe)です。 というわけで前回の続き! 前回の記事はコチラ! kai-you-tech.hatenablog.com 今回やっていくのは「Traktorで再生中の曲をどうやって取得していくのか」です。 とはいえTraktorには直接に再生中の曲情報などを取れるAPI、ましてやプラグインなどもありません! なのでTraktorに用意されているbroadcasting機能を使っていきます。 これを使うと完全ではないですが、楽曲名、アーティスト名をjson形式で取得できます。 そしてそのやりかた まずicecastをインストールします! I…
4年前
記事のアイキャッチ画像
Adobe Dimension CCを使ってハッコウくんジュースの缶を3Dで作ってみる
KAI-YOU Lab.
こんにちは。KAI-YOU開発部わたはるです。 突然ですが、最近3Dの画像制作にハマってます。 blenderというモデリングソフトをご存知でしょうか?(おっとこんなブログが...) lab.kai-you.net kai-you-tech.hatenablog.com 実を言うとblenderのモデリングは挫折しました。だって難しいんだもの。 でも3D簡単に作りたい、作れた方が色々できる...。 そんな時にAdobe Creative Cloudに追加されたのが、Adobe Dimension CCです。 Adobe Dimension CCとは? 公式サイトを見るとこのような感じのことが。…
5年前
記事のアイキャッチ画像
DJの選曲にもレコメンドがあると楽じゃないか?それTraktorでもできませんかね!? Vol.2
KAI-YOU Lab.
おはようございます KAI-YOUエンジニアのコウベ(@cabbagekobe)です。 というわけで前回の記事の続きになります。 kai-you-tech.hatenablog.com そして改めて10月29日にPOP TECH PARTYというイベントが開かれます。 POP TECH PARTYとは kai-you.net 今まで来たことある人も、行けなかったようという方も、第4回ポプテクへ、ぜひ1周年のお祝いにきてください! 参加DJは随時おしらせしまーす! 参加表明をFacebookからしていただけると超嬉しい!! https://www.facebook.com/poptechpart…
5年前
記事のアイキャッチ画像
DJの選曲にもレコメンドがあると楽じゃないか?それTraktorでもできませんかね!?
KAI-YOU Lab.
おはようございます。みなさまはDJですか?僕はどうでしょう。 KAI-YOUエンジニアのコウベ(@cabbagekobe)です。 さて、来たる10月29日にPOP TECH PARTYというイベントが開かれます。なんと1周年! POP TECH PARTYとは POP TECH PARTYとは、風呂グラマーとして知られるエンジニア masuidriveと、行政書士でフェチ東京創設者、近ごろはエンジニアと法律家をつなぐ勉強会StudyCode主催者の新井秀美、そしてKAI-YOUが共同開催する音楽イベントです。 「ゆるいつながり」をテーマとして、エンジニアを中心としたDJによる音楽とエンターテイ…
5年前
記事のアイキャッチ画像
CJM(カスタマージャーニーマップ)って作ったことある?
KAI-YOU Lab.
今日は通勤中にトンボを見たのでもう秋って感じですが、皆様いかがお過ごしですか? KAI-YOU開発部わたはる(haruchan_jpg)です。 突然ですがwebサイトを作るときにどんな目的を持って作ってますか? 受託制作であればクライアントの好みに合わせることはもちろんですが、せっかくお金と時間をかけて作るならちゃんと効果があるもの、要するにwebサイトを見てくれる人に対して働きかけるものを作りたいですよね? じゃあどのようにすればそのようなwebサイトを作れるか? サイトを訪れるユーザーをよく知ることです。 CJM(カスタマージャーニーマップ)とは? カスタマージャーニーマップ(以下、CJM…
5年前
記事のアイキャッチ画像
ディレクターだけどデザインやっててよかったこと
KAI-YOU Lab.
こんにちは。 KAI-YOU開発部わたはる(@haruchan_jpg)です。 今日で禁煙5日目です。辛い。 前職ディレクターとして働いていた私ですが、 現在KAI-YOUでの業務は半デザイナー、半ディレクターのような感じになっています。 KAI-YOUでは記事のアイキャッチを作ったり、バナーを作ったりしてます。 今日はデザインとディレクションについてです。 ディレクターとデザイナーの大きな違いは役割です。 ディレクターは指示を出して全体を管理する役、デザイナーは指示を元に実際にデザインを作る役です。 いわば現場監督と作業者ですね。 デザイナー出身でディレクターになる人もいれば、ディレクターか…
5年前
記事のアイキャッチ画像
最高のメモアプリTyporaを使ってみよう!
KAI-YOU Lab.
カイユウ開発部こうべ(@cabbagekobe)です。 みなさま、普段メモをどのようにとっていますか? 社会人たるものメモをとることは大事! そしてエンジニアがメモを取るときはMarkdownだと相場が決まっております。 ということで今回はいい感じのMarkdownエディタ『Typora』のご紹介をしてみようと思います。 Typoraとは TyporaはWindows/Mac/Linuxのクロスプラットフォームに対応したMarkdownエディタです。 現在はβ版でして無料で使えますが、将来的には有料になるっぽいですよ。 (メニューの項目もキチンと日本語化されてて安心です。) インストール! h…
5年前
記事のアイキャッチ画像
定時に帰りたい人のためのMacおすすめアプリ7選
KAI-YOU Lab.
こんにちは、はじめまして。開発部ディレクターのわたはる(@haruchan_jpg)です。 新卒で入社した会社を辞めて2018年11月からKAI-YOUで働いています。 お仕事は主に開発部のタスク管理とデザイン業務です。 私は左端です。ボードゲームが好きです。 私事ですが最近Macを買い換えました。 私には5年間連れ添ったMacBook Airがいたのですが、2ヶ月くらい前から明らかに不調(Adobeソフトを2個以上同時に開くと落ちるなど)。 MacBook Pro(15inch-2018)に買い換えました!整備既製品は比較的安いですね。 個人的にMacはそのままだと使いづらいなぁと思うことが…
5年前
記事のアイキャッチ画像
KAI-YOUで初めてのミートアップを開催します。(ブログ移転しました…)
KAI-YOU Lab.
みなさまお久しぶりです!! カイユウのエンジニアのキャベツこうべ( @cabbagekobe )です。 まことにお久しぶりになりました。(2018年とは…) ひとまずみなさまへのご報告です。下記のような記事を出しておいてなんですが、この度開発者ブログをはてなブログへの移行を行いました。 KAI-YOU LabはMiddlemanで運用していきます Middlemanでのブログ運用上のtips、細かい工夫 ブログ移行に関してはまた書かせていただきますが、みなさまにお知らせです! ミートアップを開催します。 KAI-YOU開発部主催でミートアップを開催します! 詳細はこちらです。 www.want…
5年前
記事のアイキャッチ画像
Adobe Illustrator CC2015に追加された便利機能、困ったバグや仕様
KAI-YOU Lab.
はじめまして。KAI-YOU開発部のデザイナー/イラストレーターのCKSです。 普段はKAI-YOUにおけるサービスのデザインや受託案件の制作、それにまつわるグラフィックの作成などを担当しています。 前回までMiddlemanを採用した理由やアジャイル開発などの記事が続きましたが、今回は焦点を絞って先日大型アップデートがなされ色々な機能が追加されたAdobe Illustrator CC2015の変更点や追加機能をまとめてみました。実は、頻繁に使う機能や、作業の根幹に関わる機能が多く追加されています。 GPU対応による新機能追加 CC2015の新機能の多くはGPU対応が根幹にあり、GPUパフォ…
5年前
記事のアイキャッチ画像
KAI-YOU.netではこの度emojiに対応しました
KAI-YOU Lab.
みなさまお疲れ様です! 少しご無沙汰になってしまいましたが、カイユウエンジニアの神戸です。 少し前の話なのですが、KAI-YOU.netで使用しているサーバーを変更してサーバー移転をしました!! と、同時についでにですが、これまで対応できていなかった「絵文字」に対応しました! コロッケのまんま、茸のまんま……本当にまんまなのか判定してみた!より なんで対応したのか 絵文字は1990年代に携帯電話の普及に合わせて日本で誕生し、現在では国際標準規格として世界中のパソコンや携帯電話で使用されています。 「嬉し泣きを表す絵文字(Face with Tears of Joy)が、オックスフォード英語辞典…
6年前
記事のアイキャッチ画像
フリーソフト「blender」でサクッと作る、おしゃれグラフィック
KAI-YOU Lab.
どうも開発部のbpmです!今回はフリーの3DCGソフトの「blender」で、オシャレなグラフィックをサクッと作る方法をご紹介できればと思います。 ちなみに、前に「blender」の記事を書いてからだいぶ経ちまして、3Dはメインじゃないんですが何度か仕事をいただいて、要領を得られた気がしてます。 完全フリーの3DCGソフト「blender」をはじめよう Vol.01 ブログとかにちょっと凝ってておしゃれなアイキャッチを、なんて時にお役に立てたら嬉しいです! 「blender」のいいところ 「blender」をしばらく触ってみて、やっぱ3Dいいな~と思った部分を少しだけ書きます… まず、何と言っ…
7年前
記事のアイキャッチ画像
KAI-YOUのエンジニアインターンになって、2ヶ月間で学んだこと
KAI-YOU Lab.
(アイキャッチはジャニタレ並みに肖像権が厳しいKMさん) こんにちは。KAI-YOU開発部のインターン生KMです。 普段は情報科の大学でネットワークの勉強をしているのですが、Webプログラミングにも興味があり、KAI-YOUではその技術を学ぼうと思い、インターン生として入社しました。 KAI-YOUでは、バックエンドとフロントエンドの開発に携わっています。 それから2ヶ月経ち、なんやかんやあって開発フローにも慣れたので、入社する前から今までの行動を振り返ってみようと思います。 入社するまで KAI-YOUの存在を知ったのは2016年末。 他にもいろいろWebプログラミングを学べそうな場所はあっ…
7年前
記事のアイキャッチ画像
インターンに研修も兼ねてペアプログラミングやってみた。
KAI-YOU Lab.
こんにちは。KAI-YOU開発部のデザイナーCKSです。 毎日デザインをカリカリとしているぼくですが、コーディングでの開発にも参加してるデザイナーです。 最近バックエンドができる学生がインターン生としてKAI-YOUの開発に参加してくれています。しかし彼はバックエンドだけでなくフロントにも興味があり、またKAI-YOU開発部としても、彼には幅広く参加してほしいと考えていました。KAI-YOUは職種に縛られず、自分のやりたいことをなんでもやってみて提案していく思想があります。 そんな彼に、フロントの開発の仕方、同時にKAI-YOUでの開発フローを体感して学んでもらう為、ペアプログラミングという手…
7年前
記事のアイキャッチ画像
年末タスクの大掃除! 今年のタスク今年のうちにまとめてみた
KAI-YOU Lab.
こんにちは、仕事納めのKAI-YOU開発部のねりまちゃんです。 2016年ももうすぐ終わりですが、みなさんの大掃除のご予定はいかがでしょうか? もう終わらせたよ〜って人もいらっしゃるんでしょうか。 わたしたちのチームでは、せっかくなのでタスクの大掃除をすることにしてみました。 年末タスクの大掃除! KAI-YOU.netをどんどん良いものにしていこうと会社全体で頑張っているのですが、日々の業務の中でどうしても増えていく、「あーあそこ、どうにかしたい」と気になっているタスク、「こんな新機能つけたい……けど今は無理……」と後回しになっているタスク……。 心のどこかに重なり続け、精神衛生上悪すぎる小…
7年前
記事のアイキャッチ画像
KAI-YOUで実施しているSEO対策まとめ サイト構造編!
KAI-YOU Lab.
こんにちは、KAI-YOU開発部のねりまちゃんです。 少し前のニュースになりますが、KAI-YOU.netは2016年2月1日にフルリニューアルしました! もうみなさん新しいデザインは見ていただけていますでしょうか? 実は、目に見えるページデザインやUIを良くする以外にも、内部ではSEOを意識したサイト構造になるよう心がけています。 リニューアルに伴って行ったSEOを意識した施策をご紹介いたします。 SEOを意識したページレイアウトについて まず、リニューアル後のKAI-YOU.netのページレイアウトについて詳しくご紹介します。 私たちが目で見てサイトを理解するのと同じように、Googleも…
8年前
記事のアイキャッチ画像
【slackの使い方】エンジニアも編集者も女子大生インターンも楽しく使える!
KAI-YOU Lab.
はじめまして、KAI-YOU開発部のねりまちゃんです。 みなさまのお勤めの会社では、どんな社内向けコミュニケーションツールを使っていらっしゃいますでしょうか? ChatWorkやYammer、Hipchatなど、業務で使えるアプリケーションはさまざまありますが、KAI-YOUでは2014年夏よりslackを使っています。 非エンジニアこそSlackを使うべき!──KAI-YOUでも話題のコミュニケーションツールを導入してみた - KAI-YOU BLOG 導入時に、KAI-YOUからのお知らせを掲載する「KAI-YOU BLOG」でも記事を書いたのですが、新年度になりKAI-YOUにも新しいメ…
8年前
記事のアイキャッチ画像
イラレ CC2015.2(19.2.0)で追加・強化された「ダイナミックシンボル」「ライブシェイプ」「スマートガイド」
KAI-YOU Lab.
こんにちは、KAI-YOU開発部のデザイナー/イラストレーターのCKSです。 KAI-YOUでは開発部でサービスのデザイン、受託での制作などをやっています。 去年の夏の初めにイラレの記事を書きましたが、それからまた何回かアップデートされバージョンは19.1(CC2015.1)から19.2(CC2015.2)になりました。重要な仕様の変更が行われているのでピックアップしてまとめてみようと思います。 ここ最近のイラレのアップデートは、Adobe Stockの登場やCC Librariesの追加、シェイプやシンボルの機能拡張など、ワンソースからより動的な作業展開ができるようにするアップデートが主立っ…
8年前
記事のアイキャッチ画像
まだTrelloで仕事してるの? タスク管理ツールでマジックザギャザリングのデッキを組む方法
KAI-YOU Lab.
こんにちは開発部のbpmです。新年あけましておめでとうございます! 今回は、タスク管理ツールとして有名になってきている「Trello」の少し変わった使い方を紹介させていただきます。 「Trello」について 『Trello』とは、まるでボードに付箋を貼るように手軽にタスクを管理でき、チャットサービス『Slack』との連携などもできる大変便利なタスク管理用Webサービスです。 『Trello』のサインインはこちら 基本的な使い方はとても簡単です。 任意の名前をつけた一枚のボード(Board)を作る ボードの中に様々なステータスのリスト(list)を並べる リストの中にタスクをカード(card)と…
8年前
記事のアイキャッチ画像
Middlemanでのブログ運用上のtips、細かい工夫
KAI-YOU Lab.
最近エンジニアということを忘れられることが多いですが、株式会社カイユウでエンジニアをやっていますキャベツこうべ(@cabbagekobe)です。 このエンジニアブログですがMiddleman。そして、その拡張のMiddleman Blogで運用しているということを以前書かせていただきました。→KAI-YOU LabはMiddlemanで運用していきます Middleman自体のシンプルさもあり、そのままの運用では開発者ブログとしての要求に足りない部分もあり、細かい工夫をしています。 今回はその辺りについて書いていきます。 シンタックスハイライト(コードハイライト) 開発者ブログという性質上、記…
8年前
記事のアイキャッチ画像
デザイナーだけど開発に参加するためにペアプログラミング受けてみた。
KAI-YOU Lab.
こんにちは。KAI-YOU開発部のデザイナーCKSです。 毎日デザインをカリカリとしているぼくですが、実はコードベースの開発に興味があるデザイナーです。 ぼくはプロダクト科出身で、そこで培ったバウハウスの流れを汲んだ「デザインは構造から成る」という思想を信仰しています。なので、ビジュアルだけでなくコーディングからのデザインで開発に参加したいと思っていました。 これを叶えるべく、現在、席の近いKAI-YOUのシステムを管理するエンジニアのキャベツこうべさんにペアプログラミングという手法を用いて教えてもらっています。 ペアプログラミングとは ペアプログラミングというのは、簡単に言えば一台のパソコン…
9年前
記事のアイキャッチ画像
完全フリーの3DCGソフト「blender」をはじめよう Vol.01
KAI-YOU Lab.
こんにちは。デザイナー/アートディレクターのbpmです。 今回はじめてKAI-YOU labに記事を書かせていただきます。どうぞよろしくお願いします。 前回の記事から間が空いてしまいましたが、この記事では「blender」というソフトの入り口として、その概要と基本的な使い方についてまとめていきます。 blenderとは さて、みなさんは「blender」というソフトをご存知でしょうか。 デザインや映像など何かしらのクリエイティブをやっている人、興味のある方なら聞いたことがある方も多いとおもいます。 実は僕自身もはじめたばかりでまだまだなのですがざっくり説明すると、 blenderは、主にモデリ…
9年前
記事のアイキャッチ画像
すべてのデバイスで同じ体験をつくる レスポンシブレイアウトの有用性
KAI-YOU Lab.
カイユウ開発部のニンジャです。 近年、レスポンシブレイアウトやマルチデバイス表示に対応しているWebサイトを多く見かけるようになりました。 今回は、なぜこれらが有用なのかについての考えと、実践する際に必要な下ごしらえなどについて簡単にまとめてみたいと思います。 レスポンシブレイアウトのメリット レスポンシブレイアウトは、HTMLをワンソースで管理し、ブラウザのサイズによってデザインやレイアウトをCSSで切り替えるという手法です。日本でもかなり一般的なページ設計の手段になってきました。 デザインパターンとしてGoogleからも推奨されていて、 ファイルがひとつに統一されるため、メンテナンスが容易…
9年前
記事のアイキャッチ画像
CakePHPとWordPressを連携するメリットとその方法 Vol.2
KAI-YOU Lab.
カイユウ開発部でエンジニアをしておりますキャベツこうべです。 前回のCakePHPとWordPressを連携するメリットとその方法 Vol.1の続きとしてCakePHPの環境にWordPressを導入する際の実装を初めて行きます。 余談ですが、CakePHPもWordPressもそこそこ人気のあるソフトウェアということで、ちょいちょい反響ありまして嬉しいです! 前回の記事ではCakePHPの中にWordPressを設置して、DBの設定をするところまで行いました。 今回はその続きで、Modelを作っていきます。 Modelの作成 Post Postmetum Term TermRelations…
9年前
記事のアイキャッチ画像
外部サービス埋め込みコンテンツを非同期で読み込む際の注意点とAPI資料まとめ
KAI-YOU Lab.
カイユウ開発部のニンジャです。 今回は、「KAI-YOU.net」をはじめとして日本国内でよく利用されていそうな埋め込みコンテンツについての情報と、おまけで各サービスのAPI情報についてまとめてみたいと思います。 Web媒体の多様なコンテンツ Web媒体で記事を書く際、記事の構成要素として文字/画像以外にも様々なコンテンツを引用することがあります。 弊社が運営しているメディア「KAI-YOU.net」でも、TwitterやInstagram、Youtube、ニコニコ動画、SoundCloudなどなど、パッと思いつくだけでも様々な外部サービスのコンテンツを引用しています。 通常は、各サービスが提…
9年前
記事のアイキャッチ画像
CakePHPとWordPressを連携するメリットとその方法 Vol.1
KAI-YOU Lab.
先日誕生日を迎え、会社の人に「うさぎ」というめちゃうま汁無し担々麺屋さんのTシャツをプレゼントされてウキウキ!カイユウ開発部でエンジニアをしておりますキャベツこうべです。 今回はCakePHPの環境にWordPressを導入する際の設定などついて書いていきたいと思います。こういう実装でサービスをつくる機会は少ないと思いますが、僕らが開発・運用を行なっているWebメディア・KAI-YOU.netではこんな構成でつくられています。 一見面倒に思えますが、サービスに複数人のライターや編集者がいる場合、けっこうメリットがあるのです。 WordPressについて、おさらい (これは説明する必要がないかも…
9年前