プレゼンテーションで勝ち抜く資料を作るための基礎知識を解説
この記事は2015年8月7日に公開された記事を再編集したものです プレゼンテーションで重要な事は、聞き手の理解を得ることであり、自分の提案をただ話すだけでは納得してくれないものです。 フレームワークを活用し、伝えたいメッセージを体系立てて説明することで、よりスムーズに理解してもらうことができます。 また、話す側も話すべきポイントを絞り、漏れがなく情報を伝えやすくなるメリットもあります。 今回は、プレゼンテーションの構成要素、効果的なプレゼンの要件、資料作成のコツ、話し方のコツ、そして有効な話法のフレームワーク6選をご紹介します。 目次 プレゼンテーションの構成要素 聞き手（プレゼンテーションの対象相手） 目的（プレゼンテーションのゴール） 主張（最も伝えたいメッセージ） 根拠（相手が納得する理由） 効果的なプレゼンテーションの要件 6. 聞き手の利害と一致していること 7. 論理的であるこ
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
Suave UI Demo
What is this?Suave UI is designed for web-applications based on AngularJS. It consists of CSS definitions, directives and services that helps build UI quick and efficiently. ComponentsAll these components are included in bundle-files. So you don't need to include them separately to use all them force. Font Awesome 4.2.0 provides icon setAnimate.css 3.2.0 provides CSS-animations How to use?You can
モバイルアプリ・サイトを効率良く作るためのフレームワークまとめ
最近人気の高いモバイルアプリ＆サイト制作。以前はXcodeとややこしいObjective-Cを使ってアプリを作ってましたが、今ではHTML5とjavascriptで簡単なアプリを作れるようになってきました。 僕もAngularJSを使っていろんな機能を実装したりしてますが、やっぱりフレームワークってすごく便利なんですよね。しかもモバイル向けに最適なUIまで用意されていたりするので以前より作りやすくなってます。 ここではモバイルサイト・アプリを効率良く作るためのフレームワークをまとめていきます。 モバイル制作効率化フレームワークまとめ PhoneGap PhoneGapはHTML5とjavascriptで記述したWebアプリケーションをiOSやAndroid端末向けにコンパイルしてくれる便利なツール。JAVAやObjective-Cなどの言語を使う必要があったモバイルアプリ制作が、Web系の
HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ | BACKEND AS A SERVICE mbaas BLOG
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
直感でモバイルサイトのモックアップを作成出来るオンラインツール・Fluid UI
結構良かったのでご紹介。スマフォ やタブレットなどのモックアップを 直感で作成出来るWebサービスです。 かなり簡単に作れるので選択肢の 一つとして覚えておくといいかもし れません。 有料ですが、結構良さそうなモックアップツールです。動作も軽くてサクサク作れます。 有料のモックアップツール。最安で月/29USDとなかなかの値段ですが、それに見合う機能だなぁとは思います。 パッと見、地味ですけど・・機能は結構凄い。触って頂くと直感で作成出来るのが実感できると思います。操作はドラッグでパーツを持っていって配置するだけ。Cacooを使う感覚に近いかも。※個人の感想です ↑ パーツは各種デバイスのものが用意されていますが、アップロードも可能です。アップロードはユーザー登録が必要です。 ↑ 何個も同時に作れます。ダブルクリックで新規モックアップ作成です。 ↑ 作ってて楽しい。 他、アニメーション遷移
緩いライセンスで提供された、モバイルファーストなWebサイト制作用フレームワーク・Kraken
モバイルファーストなWebサイトの制作向けに作られたフレームワークです。ライセンスはあまり聞きなれないWTFPLというもの。かなり緩いので使いやすいのでは無いかと思います。 モバイルファーストとは、モバイルサイトから先に作ろう、というコンセプトの元、Webサイトを構築していくという考え方（参照：アップルとマイクロソフトが採用をはじめた“モバイルファースト”とは？）で、Krakenもその目的に沿って作られたフレームワークとなります。 グリッドもモバイル向けの為か、6列を用意してあります。CSSはOrigamiを参考にしているとの事。ライセンスもWTFPLと、かなり緩め。 ボタンやフォームも用意。 他にもWPテーマやモバイル向けのメニュー、ドロップダウンなども取り揃えてあるみたい。使い慣れたらなかなか良さそうです。 Kraken
半歩先いくかっこいいエフェクトだけでなく実装にもこだわったCSSのフレームワーク -Maxmertkit
単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。 ドラッグ&ドロップでさまざまなエレメントを表示します。 Maxmertkitの特徴 Maxmertkitのデモ：スタティック Maxmertkitのデモ：CSS3アニメーション Maxmertkitのデモ：ソーシャルメディア てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ：CSS3アニメーション」をご覧ください。 Maxmertkitの特徴 SASSベースのオープンソースのフレームワーク CSS3アニメーションを使った演出効果 他のフレームワークとかぶらないネームスペース デザイン（カラー・サイズ）変更はテーマで簡単 Creed Creed（主義）のページではMaxmertの主な特徴が解説されています。例えばコードの簡
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid
なかなか凄いフレームワークがあったので 反射的にメモ。パブリックドメインという のが何より太っ腹ですねー。自由に使用で きて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整 するレスポンシブWebデザイン対応のHTML5 フレームワークです。 これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。 以下にざっと特徴を。 著作権放棄(パブリックドメイン)軽量(CSSは9kb)ベースライングリッドに揃済みグリッドレイアウト対応iPhoneやiPadなどにも自動でレイアウトを調整HT
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.99lime.com/
Components · Twitter Bootstrap