「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴。
quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょうか。（特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ！） それで今回はＬＰやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
CakePHP3.0への移行の準備メモ | X->A->O
CakePHP2系の最新版を利用しながら、3系への以降を少しでもスムーズにさせるためのメモです。 実際には非常に多くの作業を伴うことが予想されますが、可能な部分だけでも対応しておきたいところです。 このエントリは随時更新中です。気づいた時＆暇な時に追加・更新していきます。 PSR-4 に準拠した名前空間の導入 CakePHP3.0 から namespase が導入され、同時に PSR-4 準拠となります。それに関連してディレクトリ構造やクラス名、ファイル名が変更されます。 これに備えたアプリケーションコードの変更は2系では基本的に不可能と思われますが、準備のために整理しておきます。 APIの廃止、変更、代替案 クラス、メソッド、変数の廃止、メソッド引数の扱いの変更、推奨されている代替案などをまとめていきます。 中には 2.ｘ のかなり初期の段階で移行を促しているものなど、あえて書くまでもな
Springy - A force directed graph layout algorithm in JavaScript.
Springy.js A force directed graph layout algorithm in JavaScript. What is Springy? Springy is a force directed graph layout algorithm. So what does this “force directed” stuff mean anyway? Excellent question! It means that springy uses some real world physics to try and figure out how to show a network graph in a way that looks good. Here's an example: Getting started Springy.js is designed to be
mokkouyouの開発日記 ProgressDialogとAsyncTaskの（おそらく）正しい使い方
プログレスダイアログの使い方として、 よく、以下の様な紹介がされています。 ・・・が、これには実は問題が隠されています。 結論だけ先に言ってしまえば、 「表示中に画面を回転させるとエラーが発生する可能性がある」 です。 その2も追加しました public class AsyncDemo extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); new DemoAsync().execute(); } class DemoAsync extends AsyncTask<Void, Void, Void> { private ProgressDialog mDia
GPソフト Wiki - Androidでフリック
Androidアプリで、フリックによるページ切り替えや自動スクロールをサポートするための情報をまとめます。「フリック」は、APIの中ではflingと呼ばれています。「投げ飛ばす」みたいな意味でしょうか。ずっとflyの現在進行形だと勘違いしてました(それはflyingでした)。 サンプルアプリ HOMEアプリなんかに良く見られる、左右のフリックでページ切り替えを行うサンプルを作りました。ページ境界でスクロールが止まります。 こちらは、ページ境界に関係なく、勢いが無くなったら自然に止まるパターンです。 本記事に掲載したソースは要点のみを抜粋した不完全なものです。サンプルアプリの完全なソースコードはGPソフトの書庫からダウンロードできます。 準備 レイアウトは、ImageViewを横に3枚並べてLinearLayoutに入れたものを使っています。 <?xml version="1.0" enco
fchiba's memo [Android]ImageViewの表示サイズの決まり方
ImageViewのビュー自体のサイズと、中身(Drawable)の表示のされ方はいろいろな要素に影響されて決まる。 ちょっとわかりにくいのでざっと整理してみたいと思う。 （この記事を読むには、Androidのレイアウト計算についてなどで、レイアウトの決まり方を知っておく必要あり） サイズに影響を与える要素は以下の10個がある。 親ViewGroupからのmeasureSpec DrawableのIntrinsicWidth/Height（Bitmapなどの大きさ） minWidth/Height maxWidth/Height BackgroundDrawableのIntrinsicWidth/Height adjustViewBounds padding matrix scaleType cropToPadding このうち、ビューのサイズに影響を与えるのは1〜7のみで、8〜10はDr
Android TableLayout, RelativeLayout で RadioButton を使う
Android TableLayout, RelativeLayout で RadioButton を使う 複数の RadioButton をまとめて、そのスコープを設定するための RadioGroup という ViewGroup があります。 この RadioGroup は LinearLayout を継承していて、子要素が RadioButton でなければいけません。 そのため、TableLayout や RelativeLayout のレイアウトでは、RadioButton のスコープを設定することができません。 「ないなら、作ってしまえ」 ということで、作りました。 RadioGroup のソースを見て、ほとんどそのまま LinearLayout を TableLayout, RelativeLayout に置き換えた感じです。 ■ TableRadioGroup ・ダウンロード
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
TextViewの「ellipsize」を「singleLine」無しで有効にする - Digital Rabbit Blog
Androidアプリ開発はみ出し日記TextViewを固定にして、はみ出る分を「…」にするためのメモ書きです。 調べると、「singleLine」の属性を「true」にすればいけるとか、 「inputType」を「text」にするといけるとか書いてありましたが、 自分の場合、それでは駄目だった( そもそもsingleLineは非推奨だし )のでここに残しておきます。 あくまで1行固定、幅は画面いっぱいのLinearLayoutにいれたTextViewの話です。 <TextView android:id="@+id/tv_list_name" android:scrollHorizontally="true" android:ellipsize="end" android:layout_width="fill_parent" android:layout_height="wrap_con
Androidアプリ 縦・横回転に対応する方法
2010年6月30日 KDDIから、シャープ製スマートフォン「IS01」が、2010年7月23日 NTT Docomo からドコモ スマートフォン「LYNX SH-10B」が発売されました。 これまで縦画面を前提にアプリを作ってきましたが、これからは横置きに対応するように画面の設計をしなければならないのでしょうか？ 実際に開発してみると、縦・横回転に対応するアプリはかなり工数増（コスト増）となることがわかりました。 単純に横画面のレイアウトを追加するだけではすまないんですねー (^_^);; コンテンツのネタは、標準カメラを起動し撮影された画像を携帯用に縮小して保存した後にメールに添付するアプリ。 １－１．左は起動直後の画面、右はカメラの画面。 １－２．左はカメラで撮影した画像を取得しイメージビューに表示した画面、右は端末を横にしたところ。 １－３．左は横で保存ボタン押下げ画像、右は端末を
Android ViewStubを用いたapiキーの切り替え
先日の記事、「Android ApiキーをRelease版とDebug版で切り替える方法」にてコード内でリリースキーとデバックキーの切り替え方法を記載したが、ViewStubを用いることで、MapViewの生成をコード内から追い出す事が可能になる。 簡単な画面であればコード内でMapViewを生成してしまっても問題はないが、個人的にはlayoutファイル内に入れるのが好きなのでViewStubによるapiキーの切り離しを行った。 ViewStubの使用方法Android SDKのViewStubの説明ページに総て書いてあるので特に説明をする事はないのでソースコードのみ記載する。 ViewStub stub = (ViewStub) findViewById(R.id.mapview_stub);if(isDebugAble(this)){Log.v("debug");stub.setLay
AndroidでScrollViewの下部にボタンなどを配置する方法 | public static void main
課題 Androidの画面レイアウトでScrollViewの下部（下側）にボタンとかテキストを配置する。 ScrollViewに「android:layout_weight="1"」を入れる。 これを入れないとScrollViewの下部には何も表示されない。（ScrollViewまでしか表示されない） レイアウトXML <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="cent
Androidのあ～ん |Animation その２ 画面サイズに依存しないアニメーション
SDK1.5r3 ソースコード かなり時間が空いてしまいましたがその２です 前回のAnimation.xmlでは画面サイズに依存していたので今回は可変対応です まずは画面情報です。Viewの場合は「onSizeChanged」でViewのgetWidth()、getHeight()が可能ですが、 Activityの中ではその手が使えません。そこでこちらを使います ディスプレイの情報を取得するには これを「onResume」のタイミングで呼び出せば画面の縦横のサイズが取れるので、 必要な「Animation」クラス（今回は「TranslateAnimation」）に投げてやればOKです 今回は短いので全張りです public class TS_Anime_02 extends Activity implements OnClickListener, AnimationListener { B
blog-entry-131.html
QVGA端末表現力は弱いが製造コストが安い。小型の携帯端末に需要ありHVGA端末Android OSの基本となるサイズWVGA/FWVGA端末これから主流となるであろう端末 複数の解像度に対応する場合、スクリーンサイズとDensity(ピクセル密度)をそれぞれ3つにカテゴライズして取り扱う。 スクリーンサイズとは、実際のディスプレイのサイズを表し、Large、Normal、Smallに分類する。 Densityとは、DPI(1インチにどれぐらいドットが入るかの単位)によって、高密度(190〜250dpiを240dpi)、中密度(140〜180dpiを160dpi)、低密度(100〜140dpiを120dpi)に分類する。 スクリーンサイズとDensityをもとに、9つに一般化された仮想端末に対応したプログラムを作成することで、全ての端末に対応したプログラムが作成可能となる。 スクリーン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Show a context menu for long-clicks in an Android ListView
adakoda.com
Loading...