デザイナーが沖縄での２週間のリモートワークを通して学んだリアルなUX | DevelopersIO
意味不明なタイトルかもしれませんが、私は今年の４月の上旬から沖縄県の那覇市内及び、そこから車で行ける離島においてトータルで連続２週間のリモートワークと旅を並行して行いました。何故そんなことしたの？とか、やってみてどうだったの？という内容を書いていきます。 結論を先に書くと、最高でした。 場所が限定でなく、同じことをやろうとする人にとってできるだけ役に立つ内容になれば良いと思います。 経緯 経緯に関するまとめです。 Vagabonding Vagabonding（Rolf Potts 著）という旅に関する本を読んだのがきっかけです。私は英語版で単語を調べつつ読みましたが、日本版があるようです。読み終わってから知りました。 内容は大体下記のような感じです 旅は所有物を増やすのではなく、個人の選択の幅を広げるのが目的 やり方次第で大量のお金を必要しない旅も可能 Vagabondingとはライフス
管理職のためのエンジニア組織構築マニュアル | DevelopersIO
はじめに クラスメソッド株式会社 AWS事業部長の佐々木です。 私は前職で創業メンバーの1人としてビジネスを立ち上げた後、エンジニアとして実業務に携わりながら、統括マネージャーとして50人規模のエンジニア組織を構築しました。 また2014年にAWSエンジニアとしてクラスメソッドに入社し、2015年7月よりAWS事業部の部長に就任。事業は順調に拡大しており、2015年と比較して組織も2倍以上に大きくなりました。これは優秀な仲間に恵まれたのはもちろんのこと、組織設計と構築プランが功を奏したことも一因だと感じています。 そこで、私がこれまでに培ってきた経験から得たエンジニア組織の構築の仕方をお伝えしたいと思います。 エンジニア組織構築マニュアル 骨子を定義する これはエンジニア組織に限りませんが、組織には3つの骨子が必要です。 ポリシー ビジョン ターゲット ポリシーは、その組織が最もこだわる一
突撃！隣の開発環境 パート7【永和システムマネジメント編】 ｜ DevelopersIO
こんにちは！おおはしりきたけです。パート7の今回は、アジャイル開発で受託開発を行ったり、アジャイルのコーチングやidobataというグループチャットアプリなどの開発も行っている永和システムマネジメントのアジャイル事業部にお邪魔しました。インタビューに答えてくださったのは、Idobataエンジニアの寺田さんと、受託開発でエンジニアをやられている松島さんです。 突撃！隣の開発環境とは 技術事例やノウハウなどは、ブログや勉強会などで共有されることが多いと思います。しかし、各社の開発環境や開発体制などは意外と共有されていないこと多いと思います。ノウハウの流出になるかもしれませんが、それ以上に、より良い開発を目指している会社さん同士で情報交換を行い、良いチーム、良いプロダクトを作っていくという志の会社さんの為の情報共有のための企画になります。開発環境や開発体制なども技術領域によっても変わってくると思
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
Modern UI のようなフラットデザインを目指して使いづらくなっている件について | DevelopersIO
Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI *1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル（ボタン）とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。 一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x から刷新したデザインになりました *2。2013年4月現在の最新バージョンである4.2（Jelly Beans）もこの流れを踏んでいます。 両者ともそれまでの Web2.0 と呼ばれていた頃に流行ったグラデーションやドロップシャドウをふんだんに使ったデコラティブなデザインに対し、平面的で装飾要素の極めて少ないミニマルなデザインが特徴です。これらは主に Flat UI と呼ばれ、2012年頃から現在
[Photoshop] iOS アプリの Retina / non-Retina 画像ファイルを一括で作成する | DevelopersIO
はじめに iOS アプリの画像ファイルは Retina 用と non-Retina 用の2パターン用意しなければなりません。しかしながら、1つずつリサイズ、名前をつけて保存…というのはあまりにも非効率です。 そこで Photoshop のバッチ機能を使って Retina / non-Retina それぞれの画像を一気に作成する手順をまとめてみました。 手順 1. フォルダを2つ用意する まずはフォルダを2つ用意します。ひとつがオリジナル画像ファイルを保存するフォルダ、もうひとつが実際に iOS アプリに使う画像ファイルを保存するフォルダになります。それぞれ original と assets というフォルダ名にしました。 2. Retina 用の画像を作る 次に Retina 用の画像を一式作成します。ポイントは「ファイル名に @2x は付けない」ところです。original フォルダに保
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
セミナー・勉強会情報一覧 | DevelopersIO
【10/17（木）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー
【SCSS対応】CSS3PsプラグインでCSS3によるWebデザインの再現度を上げ効率化する | DevelopersIO
PhotoshopのデザインをCSS3に落とし込む際、Photoshopのレイヤースタイルの数値を細かくチェックしてCSSを組んでいくのは手間でこんなもんだろうっていう感覚でやってしまうことも多いと思います。 ちょっと前に話題になっていたフリーのプラグインなので今更ですが、「CSS3Ps」を試してみて、注意点などをまとめてみました。 インストール CSS3Ps 上のリンクからCSS3Psのサイトに移動します。 まずは右上の「Free Download」を押して、プラグインファイルをダウンロードしましょう。 ダウンロードファイルは以下の2つに別れています。 Download for Adobe Photoshop CS5 and CS6 Download for Adobe Photoshop CS3 and CS4 Mac OS X Lionの場合はAdobeから提供されているパッチのイン
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
【クリスマスだし】CSScomb for sublime text 2 CSSプロパティの順序をカスタマイズ【25日目の5】 | DevelopersIO
前回書かせていただいた、記事に引き続き。今回もCSScombを書こうと思います。 アジェンダ どうやってカスタムするの？ カスタムしてみる。 動作を確認してみる。 設定ファイルを作る まとめ どうやってカスタムするの？ 前回までは、プラグインが動作するまでは確認できました。 しかし、プロジェクトごとにコーディング規約があったり、自分なりのcssのプロパティ順序を指定したい場合があると思います。 そこらへんのカスタマイズをsublime text 2の preferences > packeges setting でできるもんだと思ってたんですが。。。キーバインドの設定しかない。。。こまった。 csscomb.phpで編集するみたいです。 ちょっといろいろ探ってみたところ、GitHubのissuesに何やら同じ質問されている方を発見！ https://github.com/miripirun
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
Sublime Text 2の基本とカスタマイズ【Vim風】
2012年12月4日：Vim化について指摘と参考になる情報をいただいたので追記しました。 こんにちは、僕はVimユーザーです（ちなみにVimを完璧に使いこなしているわけではありません）。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。 この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。 また、間違いがあればコメントいただければすぐに直します。よろしくお願いします！ Sublime Text 2は有料（$59）の
CSSスプライト活用でリクエスト数を削減してスマホでも高速通信（Retina Displayにも対応） | DevelopersIO
CSSスプライトの利用について スマートフォンの普及に伴って、ネットへのアクセスは自宅のPCでのアクセスから出先の無線通信環境下でのアクセスへと移行している傾向が少なからずあるかと思います。 ウェブサイト等を快適に閲覧するための条件の一つに、より少ないサーバーへのリクエスト数が挙げられます。 複数の画像を集約した1枚の画像にまとめるCSSスプライトを活用することでリクエスト数を減らすことができます。 キャッシュに格納されたスプライト画像はページ遷移の際の高速通信につながりますので、 各ページで汎用的に使用されるアイコンなどをCSSスプライト化するとよいでしょう。 それらをRetina Displayのような高解像度ディスプレイに対応する方法を合わせて取り上げたいと思います。 方法 1.画像を用意する 非Retina Display用とRetina Display用の画像を2枚用意します。
楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 | DevelopersIO
ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが本物にかなり近い形で表現されています(むしろそのまま？)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
クラスメソッド発「やってみた」系技術メディア | DevelopersIO
AWS CLIとシェルスクリプト、いつ使う？活用できる場面とTips紹介 #devio2024 #cm_odyssey
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
