Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
いい感じのスライド、作るのむずいので、「Azusa Colors」っていうKeynoteテンプレートを作った。下記のサイトからダウンロードできる。 Azusa Colors - 大体いい感じになるKeynoteテンプレート解説 デモも兼ねた解説スライドを作った。 Introducing Azusa Colors Keynote Template // Speaker DeckAzusa ColorsとはAzusa Colorsとは、大体いい感じになるKeynoteテンプレート「Azusa」に、新しいカラーバリエーションを加えたもの。 Azusaとは僕が1年前に作ったKeynoteテンプレートで、「SpeakerDeckにある “なんとなくいい感じのスライド” は大体1ページあたり3色以内で構成されている」という法則にもとづき作成した。 使われている様子を観察すると、主にエンジニアの勉強会や
Introducing Sessions: the latest product from Waldo!
Sketch3はMac向けのベクターベースイラストツールです。 スマートフォン向けアプリデザインやWebデザイン向けに特化していて、低価格ながら高性能高品質なアプリです。 詳細なレビューについてはSketch2はFireworksを置き換えるかもしれないを見てみて下さい。 Sketch3になったことで多機能になった反面、UIが多少複雑化してとっつきづらくなった感があります。 そこでSketch3を触ってみるために実践を通じて絵を描いてみましょう。 Sketch3で実際にイラストを描いてみましょう。 Sketch3をダウンロードする。Sketch3は公式サイトで体験版が、AppStoreで製品版が配布されています。 ユーザーインターフェイスの紹介Sketch3は大きく分けて4つの領域に分かれます ①ツールバー 上部には固定のツールバーが表示されています。 左から新しいオブジェクトの追加、グル
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr:http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ!って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの+αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー&デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
この記事はPepabo Advent Calendar 2014の11日目の記事です。 前日は、tnmtさんのVagrantのshell provisionerでApacheのビルド済tarボールをOSバージョン毎に作る術でした。 はじめに 今回は、Web APIを作るときに考えることをまとめました。 本当は、社内向けに資料を作っていて、社内の勉強会とかで話せればいいか〜って考えていたんですが、アドベントカレンダーのネタが本当になくて困っていたのでこれを使います。 対象者 APIを作る時、と書いてますが、クライアント側の人にとっても知っておく必要があることなので、サーバ側の人・クライアント側の人両方が対象者です。 APIを作るときに考えること 「APIを作るとき」と言っても、色んな状況があります。 まずはそれを絞ります。 APIの種類 プライベートAPI アプリのAPIなど使う人が限定され
Webアプリのルーティングにおいて、各ユーザの個別ページを特殊なものにしたい場合にどういうURLにすると便利かという話に触れる。例えばr7kamuraというIDのユーザ用のページは、Twitterだと https://twitter.com/r7kamura で、GitHubだと https://github.com/r7kamura というURLになっている。 GET /:id だと他のパターンと衝突してしまう もしユーザページに GET /:id というパターンを採用すると、他のURLのパターンと競合してしまうという問題がある。どんなときに困るかと言うと、例えば https://twitter.com/about でTwitterというサービスについて説明するWebページを提供しようとすると、aboutというIDを持ったユーザ用のページが提供できなくなってしまう。 この問題に対してよく
社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系「カンブリア宮殿」。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 (放送バックナンバー:爆走する国民的サイト!これがネットの底力だ!- テレビ東京) 公式ブログ新コーナー「news HACK」ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例(※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください)。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
The official blog of 8 Faces magazine. Featuring inspirational typography, beautiful lettering, reviews, interviews with leading designers. Curated by Jamie Clarke with Elliot Jay Stocks. If you’re one of the 220,000+ Type Worship followers on Tumblr, or a regular visitor over the last 12 years, you might be wondering where your occasional post typographic treats have gone. I’ve decided to start a
2年前に同じ趣旨の記事を書いたが、いろいろ変わったのでまた書いてみよう! Sketch 3(Mac) + Sketch Mirror(iOS) もう、Sketch以外でデザインするのはイヤだ、と思ってしまうほどパワーのあるデザインツール。ベクターベースのグラフィックツールなので、Adobe Illustratorと近いのだけど、もっと機能が絞られていて、UIデザイン寄り。いろいろと細やかに気がきいていて、好きなところを書ききれない感ある。起動が早い、ファイル保存も早い、数字書く窓でそのまま計算できる、ファイル書き出しするとき1.5倍とか3倍とか自由に拡大縮小できる、実機プレビューがリアルタイムかつ容易。 iPhone実機でデザイン確認するときは、iOSアプリSketch Mirrorでつなげることができる。リアルタイムで変更が見れる。昔はいろいろバグがあったけど、だいぶ安定して安心して使え
個人でスマートフォン向けのアプリを作る方も多くなっていると思います。そのときに必要なのがアプリのサポートページなんですが、よくあるのは無料のブログを使っているもの。せっかくきちんとしたアプリを使っているのですから、アプリのページももう少ししっかりしたものが欲しいですよね? このページではそんなスマホのアプリ制作者におすすめしたいスマホアプリ向けのランディングページのテンプレートを紹介します。 Appica iOSだけでなく、AndroidやWindowsPhone向けのデザインも用意されているランディングページテンプレート。パララックスエフェクトやレスポンシブにも対応しており、すぐに使えるレベルのテンプレートです。 Appster Appsterは非常にシンプルでクリアなデザインのスマホアプリ向けランディングページ。Wordpress対応なので管理画面のテーマオプションから簡単にデザインを
ロボットアニメを見ていると、コックピットやコンピュータのディスプレイ等、デザインされているモニターグラフィックスが気になってくる。単純にかっこいい悪いという視点もあるし、私は特にグラフィックの勉強をした訳ではなかったので知らなかったのだが、ヤコブ・ニールセン博士のユーザビリティの五原則などに則って見る視点もあるようだ。 http://allfesta.com/robot_anime_ui_01/ 劇場版機動戦士ガンダム00のモニターグラフィックスのデザインについては、デザイナーの海老川氏が色々とtweetしている。 togetter.com ガンダムハルートのマルートモードに移行する時の画面など本当に一瞬だが、3人の人格同調に対応した3つのOSが展開する様子がわかる。よく見るとOSのブロックの中に2つずつカメラアイの意匠があり、六つ目のマルートモードを表している。細かい。 またラスト付近で
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
The code /* To be used in combination with a base border class i.e something like .border { border-style: solid; border-width: 1px; } */ .border--aqua { border-color:#7FDBFF;} .border--black { border-color:#000000;} .border--blue { border-color:#0074D9;} .border--fuchsia { border-color:#F012BE;} .border--green { border-color:#2ECC40;} .border--lime { border-color:#01FF70;} .border--maroon { border
2014-06-22 いま同人特設サイトが熱いっていう話 ここ最近何か同人イベントがある度に、個々の作者がかなり凝ったデザインのWEBページを作成してるっぽい現象がある、告知ページというかティザーとかいうかそういうの。WEBデザインとか全然詳しくないからWordPressがどうのとかCSSがどうとかそういうの全然分からないけど、自分が作ったものに対して誤解なく正確に内容が伝わることは非常に大事。これはこういう理由で作って、こういう形で、中身こうなってます。売り手が買い手にわかりやすくプレゼンするっていうの大事。リフレーミングとかビジュアライゼーションとかそういうの有るっぽいけど、デザイン、特にウェブでの情報は受け手に分かりやすく伝えましょう、っていうの最近の流れだと思う。 同人特設サイト簡単に作れるっぽい Tumblrで同人音楽CD特設サイトが簡単に作れるレスポンシブなテンプレート「Tok
Herokuが自ら実践しているAPIデザインガイドをGithubに公開した. “HTTP API Design Guide” このガイドは些細なデザイン上の議論を避けて,ビジネスロジックに集中すること目的としている.Heroku特有なものではなく,一般にも十分適用できる知見となっている. 最近は,モバイル向けにAPIをつくることも多いため,勉強もかねて抄訳した.なお内容は,HTTP+JSONのAPIについて基本的な知識があることが前提となっている. 適切なステータスコードを返す それぞれのレスポンスは適切なHTTPステータスコード返すこと.例えば,“成功"を示すステータスコードは以下に従う. 200: GETやDELETE,PATCHリクエストが成功し,同時に処理が完了した場合 201: POSTリクエストが成功し,同時に処理が完了した場合 202: POSTやDELETE,PATCHリク
エンジニアが自分一人でアプリ開発などをしているとかなり困るのが画像素材の作成。(もっというとデザイン全般ですが。。。) その中でもアプリアイコンを作る際に個人ではどうしているかを晒してみようと思います。 アイコンを作る手順 ざっくり手順を言うと以下2つです。 Inkscapeで元アイコン作成 makeappiconで全サイズのアイコン画像作成 Inkscape アイコン作成といえばIllustratorやPhotoshopを使うのが一般的かと思うのですが、非デザイナーにとってこれらのソフトはまだまだ高価で簡単に手を出せるものではありません。 そこでこのInkscapeです。 公式サイトはこちら。 Inkscapeはオープンソースの無料のベクター画像編集ソフトです。(ものすごく簡単に言うとIllustatorと同じことができる無料のソフトです) 無料ですが、基本的なアイコン作りには困らない機
いい感じのスライド、作るのむずいので、大体いい感じになるKeynoteテンプレート作った。ここからダウンロードできる。 Azusa - 大体いい感じになるKeynoteテンプレート解説サンプルも兼ねた解説スライド作った。 Introducing Azusa // Speaker Deckだいたいスライドに書いたけど要約すると下記のようなことを考えた。 スライド作るの難しい色とか難しいかっこよくしたいAzusaっていうのを作ったAzusaは、大体いい感じになるKeynoteテンプレートです Azusaの特徴大体いい感じになるカラースキーム大体いい感じになるフォント大体いい感じになるマスタースライド色カラースキーム考えた 白っぽい色(白っぽいクリーム色とか白っぽいねずみ色) 黒っぽい色(赤っぽい黒とか青っぽい黒とかそういうの) 緑とか青とかピンクとかのアクセントカラー1色 原色すぎないほうがイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く