HonokaはオリジナルBootstrapテーマです HonokaはBootstrapテーマの一つですが、以下の特徴を持っています。 Easy to Start HonokaはBootstrapを元に製作されているため、非常に高い互換性を持っています。マークアップに関する規約はほとんど変わりません。
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
今回はコンポーネントとして使うデザインパーツ(コンポーネント)を紹介します。 デザインパーツとは デザインパーツを紹介する前に、デザインパーツを「そのまま使うこと」の意味を考えてみましょう。 前回紹介した基本スタイルは尖った指定などはなく、比較的どんなサイトでも無難に使えるデザインです。 これから紹介するタブやぺージング、ナビゲーション、ジャンボトロン、メニューなどのデザインパーツはclassを指定するだけで簡単に使えるパワフルなコンポーネントであり、その分Bootstrapらしさを演出するパーツになっています。 しかしながら、CSSやLESSを書かずに、つまりデザインをせず、すべてBootstrap任せてしまえば、どうしても、同じ見た目になってしまいます。特に画像・写真等のビジュアル要素が少ないテキストベースのサイトではより顕著に現れるでしょう。そのため、サイトを制作する上で要件・納期を
BootstrapといえばTwitter Bootstrapが有名で、汎用的な画面デザインが準備されているのでサクッと開発できて便利ですが、Androidにもそれがやってきたようです。 MOONGIFTさんで紹介されていたので試してみました。 Androidアプリを開発する際のベースにどうぞ!「Android Bootstrap」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ 本家のサイトはこちら。 Android Bootstrap YouTubeの解説ビデオ(英語) Android Bootstrap - Getting Started まずはGitHubからソースを取得。 donnfelker/android-bootstrap · GitHub デバッグで起動してみます。 ログイン画面 公式サイトにも書いてますがデモ用のアカウントとパスワ
無料なのにこのクオリティヤバイ!! Bootstrap Zeroはその名の通り、Bootstrapをベースにデザインされた美しいテーマが無料で配布されているサイトです。 これまでもStart BootstrapとかBootswatchとか無料のサイトが合ったのですが、無料だけあって有料のテーマと比べるとちょっとベーシック感が否めない状況でした。 ところがこのBootstrap Zeroはかなりクオリティが高いテンプレートが多いです。自分でデザインする人のためのStarterから、そのまま使えるデザイン済みのThemes、さらにFacebook風やGoogle+風、Android風などもあってかなりのクオリティっぷり! それではいくつか御覧ください。 Starter 本家のexampleにひと手間加えた感じです。 Themes こちらは気に入ったものを幾つか Admin 管理画面で使える!!
Bootstrap3の無料テーマ&テーマ集まとめ BlackTie.co http://www.blacktie.co/ 最近衝撃を受けたフリーのテーマ集。どのテーマもかっこよすぎて涙が出ます……ありがたや……ネーミングとロゴもかわいくてきゅんとしますね。 テーマ数は現在(2015年6月時点)25個あり、今後の追加も楽しみですね。 Bootswatch http://bootswatch.com/ こちらもテーマ集です。Bootstrap2の頃からありましたが、3にも対応したようです。フラットデザインにするなら「Flatly」がおすすめ。 Start Bootstrap http://startbootstrap.com/ こちらもテーマ集。管理画面用やポートフォリオ用など、いろいろな用途別に作られているのがありがたいですね(「Sponsored」のタグがついたものは有料なのでご注意!)。
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる!Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
we love herokuリニューアルのお話です。今回はデザインサイドの話です。 we love heroku とは we love herokuは、herokuを使ったサービスを登録するギャラリーサイトです。 開発したキッカケは、@herokujpさんのつぶやきでした。去年の2月ぐらいでしたかね、仕事の帰り道にこのつぶやきをみて、設計しながら家帰り、即実装という感じでした。 railsを初めて1ヶ月ぐらいの頃にherokuを試したところ、すごく感動したのですっかりherokuのファンになっていました。そして、2月のheroku meetupに参加しようと思っていたところ、先ほどのつぶやきが目に止まり。作ってみるかな、と。 トップページを振り返ろう 今回は機能の話は書きません。あえての見た目の話だけです。当時のバージョンのスクリーンショットはこんな感じでした。 Bootstrap2のまん
Play! framework Advent Calendar 2011 jp #play_ja : ATND の 18 日目です。 playframework で Twitter Bootstrap を利用する手順を紹介します。 Twitter Bootstrap とは Twitter 社が 2011 年 8 月に発表 した、Web サービスのフロントエンドを作成するためのツールキットです。GitHub で公開されており、誰でも無料でダウンロードして使用することができます。 主な内容は LESS で書かれた CSS のセットで、グリッドレイアウトやかっこいいフォーム、角丸ボタンなど、Web サービスの画面を作成するために必要なひと通りのデザインが用意されています。 詳しくは以下の記事を参照してください。 デザインが苦手なWebサービス開発者に朗報!今風のデザインがさくっと作れる『Twit
Play2.0でBootstrap2.0を使う方法を紹介します。 Play2.0ではパッケージviews.html.helper.twitterBootstrapにBootstrap用のテンプレートがあるのでこれ使えばいいじゃんと思っていたのですが、残念ながらこれはBootstrapの2.0には対応していません。見てみたら簡単に対応出来そうなので、このコードを参考に作ってみました。 Form Template Helpers と、その前に、Play2.0のテンプレートについて少し紹介します。Play2.0にはForm周りのコーディングを楽にする為のform template helpersという仕組みが提供されています。このテンプレートで入力フィールドは <input type="text" name="username" id="username" value="@user.name">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く