「プロトタイプ制作に使うSketch/Framerで動くモックアップ」CSS Niteセミナーレポート | ブログ | SINAP - 株式会社シナップ
こんにちは！梅雨明けが待ち遠しいデザイナーの飯山です。今回はプロトタイピングツールの実践についてご紹介します。 開発の早い段階で動作するモデルを制作していく手法であるプロトタイピング。高解像度化するディスプレイへSVG画像活用のアプローチ。 Web制作においてこれらの動きが起きている中、デザインフェーズでも常に変化に対応していくことが求められます。私は普段Photoshopを使ってページデザインやUI制作をする事が多いのですが、他の有用なデザインツール検討もその１つではないかと思います。 先日参加したCSS Niteセミナー「プロトタイプ制作に使うSketch/Framerで動くモックアップ」について学んだ内容を元にお届けします！ Sketchは以前より一部の制作者の間では使われていたデザインツールですが、AdobeからFireworksの開発終了アナウンスのあった2013年5月を期に、こ
アプリ企画で役立つ。スマホ上で動くワイヤーフレーム/モックアップ作成ツールのまとめ | BACKEND AS A SERVICE mbaas BLOG
デザインツールは既に無数にありますが、特に今回はiOSやAndroidデバイス上で作成したり、その動作を確認できるサービス/アプリに限定してまとめてみました。やはり実機上で確認するとより分かりやすく、情報を詰め込み過ぎていないかや画面遷移に違和感がないかと言ったチェックに使えると思います。mBaaSお役立ちブログ トップ> ブログ> Tips> アプリ企画で役立つ。スマホ上で動くワイヤーフレーム/モックアップ作成ツールのまとめ iOSやAndroidアプリの開発をする際に、まず必要になるのがデザインや動作がどういったものになるのかというワイヤーフレーム/モックアップではないかと思います。特にアプリの場合、画面遷移を含めてどう動くのかを見ないと何となく実感もわきづらいというものです。 デザインツールは既に無数にありますが、特に今回はiOSやAndroidデバイス上で作成したり、その動作を確認
Web・アプリ開発に使える無料のワイヤーフレームツールまとめ
Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい！という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ＆ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す
Pixateでアプリのインタラクションモックアップが捗りそう
インタラクションのモックアップ ネイティブアプリを作っていて、いわゆるインタラクション・アニメーションの部分をモックアップできるツールの必要性を感じたので @hiloki さんに聞いたツールをいくつか試してみました。 The Next Generation of Mobile Interaction Design | Pixate Justinmind: Interactive wireframes for web and mobile Briefs 昔ながらに Flash を使うという選択肢もあった気はしますがせっかくなので、そういう用途に特化したツールを探したかった次第。（メンバーに Flash 使えるひとがいなかったという事情もある） Pixateがよかった The Next Generation of Mobile Interaction Design | Pixate 結果、一番
Androidコードディング規約 - Qiita
App(Application) 1.命名規則 アプリケーション名 普通の英語名（スペースを含んでも構わない） UpperCamelCase プロジェクト名 UpperCamelCase Src(Sorce) 1.命名規則 パッケージ名 すべて小文字 スペースは削除して、アンダースコア(_)に変更する。 srcの中のパッケージ名： メインパッケージ：<リバースドメイン名>.<アプリケーション名> メインパッケージ以外：<メインパッケージ>.[controller|model|view...] 詳細な構成については、2のフォルダパッケージ構成に記す。 ファイル・クラス名 UpperCamelCase 名詞 Activity、Fragment、AdapterなどはComponent名を末尾に付ける メソッド名 lowerCamelCase 動詞で始める。ただし、Booleanを返すメソッドはi
CSSの修正が捗る「リアルタイムコーディング」とは
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo
初心者Webコーダーが覚えると便利なオススメツール・テクニック | マイナビクリエイター
マイナビクリエイター公式ブログ「マイナビクリエイター編集部」を御覧の皆様ご機嫌麗しゅう。OZPAの表4の@OZPA です。 今回のコラムは、「初心者Webコーダーが覚えると便利なオススメツール・テクニック」をお送りいたします。ﾝｶﾞｸﾞｸﾞ エディタに関して ズバリ！好きなエディタを使いましょう。 …ってこれで終わると編集部さんからぶん殴られそうなので追記しますが、エディタに関しては各人によって求めるものが違うので、私にとって使い勝手の良い物があなたにとってのベストプラクティスとならない場合もあるのです。 その業はきのこたけのこ戦争より根深いと思います。 SublimeText それを承知であえてオススメするのであればやはり、Sublime Textでしょうか。 優雅なデザイン、豊富なプラグイン、軽快な動作、増やせるキャレット…。 リリース以来、数多くのコーダー・エンジニア・デベロッパーの
昨今のCSS設計事情からみるCSS設計のあり方とは
本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです
[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory
デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS
![[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1cb6498582cf16c5feffd074f068f12f4d958a9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040901.png)
SEと営業のためのヒアリング講座。モデレータのヒアリングテクニックから学ぶ（前編）
数カ月前のことですが、次のような依頼をいただいたことがありました。「新野さんのモデレータとしてパネリストから発言を引き出す能力を生かして、SEや営業がお客様の要望をうまくヒアリングできる技術が身につくような講座をお願いできないだろうか」と。 SEの仕事としてお客様の要望を聞き出す、いわゆる要求開発の重要さが増してきている一方で、SEやエンジニアの研修は技術中心でヒアリングを上達させるようなものはなく、なんとかそういった研修ができそうな人を探しているとのことでした。 超大手SIerからヒアリング講座の依頼が 僕は仕事としてほとんど毎月のようにパネルディスカッションのモデレータをしています。今年に入っても、インフォテリアの「ASTERIA Cloud Conference 2015」、F5の「F5 Agility Tokyo 2015」でモデレータを行い、今週金曜日にはCloud Days T
IEで「レイアウト崩れが起きてます」と言われた時の対処メモ（Internet Explorerの「互換表示モード」を解除する）
HOME>Web>IEで「レイアウト崩れが起きてます」と言われた時の対処メモ（Internet Explorerの「互換表示モード」を解除する） 業務でやっているとある企業のWebサイト（レスポンシブ対応、対象ブラウザ：IE9〜）構築で、こちら側のブラウザチェックでは問題ないのにクライアントから「こちらのPCで表示が崩れるんですが…」との連絡が。 対応していないCSS3プロパティの効果が見えないとかならまだしも、レイアウトがグチャグチャになっていると言われては冷や汗が止まりません。 しかも、制作側ではどのPCで見ても問題ない上、対応していないIE8ですら問題ないというのに…これは困った。 ie8で崩れぬ表示 クライアント先のie9で崩れている そんな悪夢（バグ）の波間で 終わらない旅路（デバッグ）を続ける堕天使（わたし） 虚しさの意味を知る 柔らかな風が吹くこの場所で… （GLAY/HOW
ソフトウェアプロセス技術がロストテクノロジーになっている - きしだのHatena
最近会った人とよく話すのが、ソフトウェアプロセス技術がロストテクノロジーになってるんではないかということです。 ソフトウェアプロセスというのは、「プロセスがよいソフトウェアをつくる」という前提のもと、どのようなタイミングでどのような成果物を作り、どのような管理をし、どのように検査をしてソフトウェアを作るかという手順です。 そして、プロセス技術というのは、そのようなプロセスを構築し運用し改善する技術です。 このようなソフトウェアプロセス技術は、1995年くらいから2000年くらいにかけて盛り上がり広まりかけたのですが、そのタイミングでWebが広まりはじめ、「Webは進化が速い」「作るものがどんどん変わる」などを合言葉に、「アジャイルプロセスを採用する」という名目でなんら管理されないプロセスが普及しました。その結果、プロセス技術は完全に下火になっているように思います。 もちろん、Webの発展段
アイデアをすぐカタチに残せて便利！画面遷移を伴うモックアップが簡単にオンラインで作成できる -PLOGLESS | コリス
さっき思いついたアイデアなんだっけ？メモしとけば、、ということはありませんか。 デスクトップでもスマホからでも簡単に作成・編集・閲覧ができる、プロトタイプのモックアップを簡単に作成できるオンラインサービスを紹介します。 基本機能は無料で利用でき、有料だと更に便利機能が利用できます。 下の方に、有料プランが無料で利用できるコリス限定クーポンがあります（先着50名様）。 ※14時すぎにクーポン、50名様分終了しました。 ※15時30分、おかわりクーポンを発行しました。 ※おかわり分も終了しました。 ※3/31までに登録された方にはクーポンが発行されると思うので、そちらをご利用ください。 PLOGLESSで画面遷移を伴うアプリのプロトタイプを作成するのに専用アプリやコーディングの知識は不要、手書きのラフがあれば5分で簡単に作成できてしまいます。 画面遷移を伴うアプリのプロトタイプが簡単に作成でき
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
クラウドワークス勉強会「レガシーコード改善の戦略と戦術」（後篇：戦術＆懇親会） - CrowdWorks Engineer Blog
こんにちは！開発の所(@ctokoro_me)です。 クラウドワークス勉強会「レガシーコード改善の戦略と戦術」前篇（戦略）に続き、後篇（戦術＆懇親会）をお送りします。 「レガシーコード改善の戦略と戦術」 講師：和田 卓人(@t_wada) タワーズ・クエスト株式会社 取締役社長、プログラマ、テスト駆動開発者。 学生時代にソフトウェア工学を学び、オブジェクト指向分析/設計に傾倒。 その後様々な縁に導かれソフトウェアパターンやXP（eXtremeProgramming）を実践する人たちと出会い、後のテスト駆動開発の誕生を知る。 テスト駆動開発によって「完璧主義の呪い（完璧な設計を得るまではコードを書けないし良いシステムも出来ないという強迫観念）」から解かれてからは、文章や講演、ハンズオンイベント等を通じてテスト駆動開発の啓蒙に努めている。 今日もグリーンバンド（テスト駆動開発者の証）を左手に着
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
「全然おもしろくないゲーム」から日韓450万ダウンロードのヒットアプリへ。死にまくり育成ゲー「生きろ！マンボウ」のマンボウがヒーローになれた理由。 | アプリマーケティング研究所
「全然おもしろくないゲーム」から日韓450万ダウンロードのヒットアプリへ。死にまくり育成ゲー「生きろ！マンボウ」のマンボウがヒーローになれた理由。 12月に開催した「AID×アプリマーケティング研究所 アプリ勉強会」より、セレクトボタンさんの講演をお届けします。「生きろ！マンボウ」のこれまでについて語っていただきました。 ※株式会社SELECT BUTTON CEO 中畑虎也さん（撮影：TechBuzz） 「生きろ！マンボウ」について 自己紹介 中畑： 僕は元々カヤックという会社で、2年間ディレクターの修行をしていました。その時は、カジュアルゲームやソーシャルゲームなどをつくっていました。そして、2014年7月にSELECT BUTTONという会社を設立しました。 最近のマイブームはフードファイトです。僕はカタチから入るので「社長になったから、とりあえず太ろう。どんどん太ろう」ということで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android Developers
Unreal Engine 4（アンリアルエンジン４）が無料化！ - どなたでも無料ダウンロード！将来のアップデートもすべて無料です！
objectivec-iphone.com