information

弊社のインターンシップで使っているサイト(256 INTERNS)をリニューアルしました。

https://gyazo.com/9c41f449fa958fc45b1062b95b43ae6b

弊社インターンにならないとログインできませんが、中はEラーニングシステムになっています。

https://gyazo.com/43fd4cc9713b35d470ca73468b3930fc

インターン生は絶賛募集中ですので、こちらからぜひ!

この記事のタグ

インターンシップのサイトがリニューアル へのコメントはまだありません

https://gyazo.com/91fddca5b494394368ccdfa7766c1d9e

株式会社永和システムマネジメント アジャイル事業部

弊社@machidaが担当させていただいた株式会社永和システムマネジメント アジャイル事業部様のホームページがリニューアル公開されました。

この記事のタグ

永和システムマネジメント アジャイル事業部様ホームページのデザインを担当させていただきました。 へのコメントはまだありません

オンラインアシスタントサービスのCasterBizで弊社が利用事例としてブログ・動画が公開されました。

CasterBiz | オンラインアシスタントならキャスタービズ

この記事のタグ

CasterBizで利用事例として弊社が紹介されました へのコメントはまだありません

 komagata

RubyistのためのCSS勉強会

  • 1月
  • 12
  • 2016

さる2016年1月9日、西脇.rb&神戸.rbの合同勉強会の「RubyistのためのCSS勉強会」にて弊社 @machida が発表・ハンズオン講師を行いました。

詳細はソニックガーデン伊藤さんのブログにて公開されています。

デザイナさん直伝のCSSテクニックが満載!「RubyistのためのCSS勉強会」を開催しました – give IT a try

わたくし @komagata も発表前の資料を見せてもらっていたのですが、派手さよりも実務で役に立つ内容重視のリアルなものでした。

弊社内でよく話し合われているのがこの内容にも出てくるコンポーネント化についてです。

Javascriptで頻繁に話されるキーワードですが、フロントエンドとしてCSSのコンポーネントとJSのコンポーネントをどう統合していくかの議論は少ないように思います。

それにはエンジニアもCSSのトレンドを知る必要があります。その上で上記資料のAtomic Designなどの考え方は良い取っ掛かりになりそうです。

この記事のタグ

RubyistのためのCSS勉強会 へのコメントはまだありません

リモートワークを研究するメディア「リモートワークラボ」さんに弊社がインタビューしていただいた記事が公開されました。

リモートワークというより弊社インターンシップ制度の紹介のようになっているような気がします・・・。

この記事のタグ

リモートワークラボでのインタビューが掲載されました へのコメントはまだありません

ネットで壱番怖い話大賞

世界最大の怖い話投稿サイト『怖話(こわばな)』を運営する合同会社フィヨルドは、誰でも無料で投稿・閲覧できる新しい読み物プロジェクト『STORIE(ストリエ)βテスト版』を運営する株式会社インデックスと共同で、『ネットで壱番怖い話大賞2015 ~絶対に見てはいけない?!ネット中の怖い話が集まる夏2015~』を7月14日より開催します。

『ネットで壱番怖い話大賞2015 ~絶対に見てはいけない?!ネット中の怖い話が集まる夏2015~』は、恐怖体験、都市伝説、怪談、ホラーなどの怖い話を、『怖話』や『ストリエ』のフォーマットで応募するストーリーコンテストです。

島田秀平さん

本コンテストには、昨年の夏季怪談テレビ番組(地上波)へ最多出演し、インターネット動画のタレント別『怪談』再生回数ナンバーワンを獲得するなど怖い話に造詣の深い『島田秀平(しまだ しゅうへい)』さんを審査委員長に迎え、世界最大の怖い話サイト『怖話(こわばな)』、新しい読み物プロジェクト『STORIE(ストリエ)βテスト版』と連動し、もっとも怖い話を選出します。

コンテスト募集要項

『ストリエ × 怖話 連動企画 ネットで壱番怖い話大賞2015
 絶対に見てはいけない?!ネット中の怖い話が集まる夏2015』

募集期間:2015年7月14日~2015年8月31日23:59まで
参加方法:ストーリーの投稿の際に「怖い話大賞2015」タグをつけて投稿
投稿形式:怖話のフォーマットでつくれられたもの、もしくはストリエのフォーマットでつくられたもの
賞品:大賞 五万円 / ストリエ賞 一万円 / 怖話賞 一万円

怖話からの応募は簡単、すぐに完了します!
2015年8月31日の23:59までに怖話に投稿した自分の怖い話の『解説』に、半角英数で、#gp2015と記入してください。これだけで応募完了です。一人何作品でも応募可能です。
どしどしご応募ください。

ネットで壱番怖い話大賞2015

この記事のタグ

『ネットで壱番怖い話大賞2015』島田秀平さんを審査委員長に迎え7月14日より開催 へのコメントはまだありません

弊社では怖話を運営しておりますが、Webサイト・アプリケーションのデザイン・システムの受託開発も行っております。(受託開発を受け付けていますか?とよく質問されるので)

怖話を見ていただければ一番良いのですが、Railsを用いたWebアプリケーション開発・デザインを得意としています。

弊社での受託開発について一つ悩みがありまして、それは、

「せっかくデザイナーとプログラマーの2人の会社なのに別々の案件ばかりやっている。」

ということです。

わたくし@komagataはプログラマーですが、プログラマーのいないデザイン会社様からの依頼で外部のデザイナーの方と組んで開発をすることがほとんどです。

また、@machidaはデザイナーですが、デザイナーのいないシステム会社様からの依頼で外部のプログラマーの方と組んで開発することがほとんどです。

弊社内で隣に座って仕事をしてるのに別々のプロジェクトをやっているわけです。

「二人一緒の案件であればもっと良いものを早くお客さんに提供できるのになあ」

というのが大きな悩みです。

昨今珍しく二人ともが関わったお仕事としては、クラウド士業サービス「Bizer(バイザー)」様があります。

月額2980円のクラウド士業サービス「Bizer(バイザー)」が、役所提出書類を自動生成するサービスを開始 – THE BRIDGE(ザ・ブリッジ)

Heroku + Railsで開発しており、@komagata, @machidaに加えて元弊社インターンでフリーランスRailsプログラマーの@yukihrやアルバイトの@rono23などと一緒にチームを組んで行いました。普段と比べてスピード感と質において価値を出しやすかったと思います。

ゼロからのWebアプリケーション開発

といったわけで、怖話のような、デザイン・インフラ・プログラムを含めたゼロからのWebアプリケーション開発のご要望を探していきたいと思います。そういったお話がございましたらぜひ、下記お問い合わせフォームやFacebook、Twitterでご連絡くだされば幸いです。

お問い合わせ « 合同会社フィヨルド

この記事のタグ

弊社のWebアプリケーション受託開発の悩み へのコメントはまだありません

怖話のデザインリニューアルをしました。

怖い話投稿サイト 怖話

デザインリニューアルの目的

怖話は元々怖い話投稿サイトとして始まったのですが、今は怖い話だけでなく、都市伝説やホラー漫画、妖怪、悪魔、UFO・宇宙人など、怖い話だけではなくオカルト情報のコンテンツへ横展開が進み、サイトの構造が変わってきたので、それに合わせてデザインを変える必要が出てきました。

何で横展開を始めたのかというと、怖い話だけで得られるPVの限界が見えてきた(収益の限界も)のと、より多くのユーザーの方が怖い話を投稿しやすいように、怖い話のインスピレーション源となるような情報もサイトに用意したかった、というのもあります。怖い話が好きな方はきっとオカルト情報も好きなはず。もっと怖話を楽しんでもらえたら、というのが一番ですが。

リニューアルが必要と思って一年くらい。たまに寝る前なんかにちょこちょこ触ってリニューアル用のブランチを育ててはいたのですが、昨年末の合宿からインターンの方々の力も借りて総力あげてリニューアルに挑みました。特に先日インターンを卒業して永和システムマネジメントさんにジョインした相京さんには、沖縄合宿にまで付き合ってもらって、起きた瞬間から寝る寸前までガッツリ作業を手伝ってもらいました(沖縄の意味ない!!)。本当、ありがとうございました。

CSSとHTMLの整理

せっかくのリニューアルなので、今までたまっていた負債も一気に返してしまおうと、マークアップも書き直しました。今回はちょっと変則的なBEMを導入。

Block__Element—Modifier という class を付けるのが BEM ですが、今回は Block__Element だけを導入して、Modifier の 代わりに SMACCS の State を使いました。

具体的な例

例えば、サイトのロゴが header の中にあって、そのロゴが今だけ正月バージョンの見た目である、という場合。

BEM
<header class="header">
  <h1 class="header__logo--newyear">ロゴ</h1>
</header>
今回のマークアップ
<header class="header">
  <h1 class="header__logo is-newyear">ロゴ</h1>
</header>

って感じです。

つまり、Modifier ではなく、それを State と解釈して、`is-newyear` というclassを付けました。`is-newyear` で `header__logo` のスタイルの必要なところだけを上書きしているので、`is-newyear` を外せばデフォルトの状態に戻ります。

このやり方のいいところ

このやり方のいいところって、`jQuery`を使ってちょっとした動きを付けるときに、最近はなるべくCSSアニメーションでやりたいのですが、その場合、割とやることは `.addClass` や `removeClass` くらいなんですよね。で、その class が付いたときにCSSでアニメーションさせる、と。

このボタンをクリックすると、`nav` に `.is-opened` という class が付く。デフォルトの状態から `is-opened` の状態に切り替わるときに css で `transition` を付けるなど。

そういうときに State がいいんですよね。

この辺のマークアップの話は皆さんそれぞれ工夫されていると思うので、これが一番ではないかもしれないし、全然異論も認めます。

Gem oulu-rails の採用

oulu-rails って何?って話ですが、これ、僕がしこしこ作ってる sass の mixin集の gem です(Github)。

CSSに関する面倒を解決するために作ってきた mixin を複数案件をまたいで使えるように、gemの中に詰め込みました。

text-block

文字を打つとき、僕の場合は `font-size`、`line-height`、`margin-bottom` を同時に考えるのですが(あくまでも僕の場合は)、それを一行に書けないかなー、って思って作った mixin。ついでに `font-weight` や `color` や `font-style` も必要があったらそれも一行に書きたい。

p
  font-size: 14px
  line-height: 1.8
  margin-bottom: 21px
  font-weight: bold
  color: white
  font-style: italic
+text-block(14px 1.8 21px, bold white italic)

こんな感じで、「, (カンマ)」の前は基本設定、カンマのあとはオプション設定。オプション設定は好きな順番で書けるって感じのmixinです。ちなみに、単位が `px` の値は `rem` も出力してくれます。

absolute、fixed

あとは、`position` を設定した場合は、`left` や `top` などの位置の値、`z-index`の値を書くことも多いので、それらを一行で書きたい、っていう mixin なんかもあります。

div
  position: absolute
  left: 0
  top: 20px
  z-index: 4

.screen
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0
  z-index: 5
div
  +absolute(left 0, top 20px, 4)

.screen
  +fixed(left 0, right 0, top 0px, bottom 0, 4)

こんな感じです。「位置+値」の場合は「位置: 値」になり、数字一つだけの場合は `z-index` の値になるようになってます。こちらも単位が `px` の値は `rem` も出力してくれます。

こんな感じのちょっとした自分にとって便利なものがたくさん入ってる Gem です。色々とオレオレな仕様なのでオススメはできないですが、これのおかげで sass の行数はものすごく減って、自分的にはすごく読みやすくなったので満足しています。何よりこういうライブラリを作るのが楽しかったです。

ちなみに、ouluを作り始めたときは compass を導入してたのですが、途中から、bourbon に変えました。理由は、 あんまり compass 独自の機能を使ってなかったのと bourbon のほうが軽いからです。bourbon も無しにすることも少し考えたのですが、oulu の中に bourbon と重複する機能が結構あって、それを自分でメンテするより bourbon に任せた方が楽ちんなので、oulu のほうの機能を削除して bourbon に置き換えました。

リニューアルして気に入ってるところ

今回、リニューアルしたところで個人的に気に入ってるところを地味なものばりですが挙げておきます。

タイトルバーが付いてきて、それをタップで上に戻れるパーツ

cap1

cap2

下にスクロールすると、タイトルバーがくっついてきて、タイトルバーをクリックすると上にスルスルっと戻るパーツ。実装について特別なことはしてないのですが、iPhoneの場合、画面上部に表示されてる時計の部分をタップすると上に戻るという機能を知ってる人があまりいないので、こういうのを用意しました。

効果のプレビュー

怖い話を入力するときに、怖話って背景画像を切り替えたり、効果音やBGMを挿入したり出来るんですが、それがどこでどのような効果が挿入されたかがわかるプレビューの機能を入れました。

cap3

js をゴリゴリ書いてる感があって実装が楽しかったです。

トップページから怖話アワードの現在のランキングへ

怖話は毎月、その月で一番評価の高かった怖い話に怖話アワードという賞を差し上げてるのですが(商品はamazon ギフト券)、それのランキングをトップページからすぐに行けるようにしました。

cap4

このランキング、毎回かなりのデッドヒートを展開してくれてすごく面白いです。ぜひ、皆様もお気に入りの話があったら「怖い」ボタンを押して欲しいです。

リニューアルの結果

とりあえずリニューアルの結果は大成功です。というのも自分がかなりの怖話ユーザーなので、すごく使いやすくななったと思ったので。

まぁ、今までが酷かったので、やっと普通になれたという感じですが。数字は後ほどここのブログで発表があると思いますが、20%以上セッションが上がったり、下がり気味だった検索結果順位も上がってきました。

怖話をよろしくお願いします。

怖話はコチラ

この記事のタグ

怖話デザインリニューアルしました へのコメントはまだありません

怖話 – 最怖の1万7000話の怖い話・漫画が読める!

怖話iOS版をアップデートしました。主な変更点はiPhone6, iPhone6 Plus対応、iOS8対応です。iPad版も更新されています。

BGMや効果音を駆使した作品も増えてきているので怖話オブザイヤー2014ランクイン作品をアプリ版怖話で体験してみていただきたいと思います。オススメです!

この記事のタグ

【iPhone6】怖話iOS版アップデート【iOS8】 へのコメントはまだありません

弊社ではインターンシップ制度を行っています。詳細は長いのでリンクを置いておきます。

リモートインターンは随時募集していますが、ローカルインターンはオフィスの席が空いているかどうかによるのでお問い合わせフォームから聞いてみてください。

また、現在企業様向けに研修としての内定者インターンシップの取り組みも進めております。(ご興味おありの方がいらっしゃればこちらからお問い合わせいただければ企業様向けの資料をお送りします。)

この記事のタグ

弊社のインターンシップへの取り組みについて へのコメントはまだありません