ループス・コミュニケーションズは、 企業のSNS活用戦略の立案・運用改善、啓発教育などのコンサルティングサービスや、リーダーシップやイノベーションをテーマとした企業研修を提供しています。
レスポンシブ対応のWebサイトを紹介するときや、ちょっとしたモックアップを制作したいときに役立つ、便利なフレーム素材やサービスをご紹介します。MacやiPhoneなどのシンプルなフレーム素材から、キャプチャを用意してアップロードするもの、URLを指定するだけで出力してくれるツールまで、いろいろと知っておくと便利ですね! モックアップを簡単に作成可能なWebサービス。 自分で作るのは手間だし時間がない!という方は、簡単に作成・DL可能なWebサービスを利用してみてはいかがでしょうか。 URLを指定すれば作成完了! – Placeit 使用したいフレーム写真を選んでサイトのURLを指定すれば、簡単にイメージ画像がダウンロードできます。有料会員になれば、高解像度なものがダウンロードできます。フリーライセンスの場合、商用利用にはバックリンクが必要です。キャプチャをアップロードでも作成可能。 なんと
ワイヤーフレームの初心者ガイド→ Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you’ve yet to use wireframing, it’s time to get your feet wet.. | Tags: Workflow この記事はWebdesign tuts+の記事を翻訳したものです。 この記事はシリーズUX Founda
スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツールなのですが、そのために専用ソフトウェアを購入するのは躊躇してしまう人も多いはずです。そこで今回は使い慣れたPowerPointやKeynoteといったプレゼン作成ソフトウェアを使ってスマホアプリデザインのモックアップが作れるテンプレートやプラグインを提供しているサイトを紹介します。Webサービスとは違って、ダウンロードしてしまえばオフラインでも作成できるのが魅力です。mBaaSお役立ちブログ トップ> ブログ> Tips> PowerPoint/Keynoteでスマホアプリのモックアップを作れるテンプレート/プラグインを一挙紹介! スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツー
ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に5つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早
WordPressやwixの登場によって、今や手軽に良い構成のウェブページをデザインすることは当たり前となってきています。 リピーターが増えるECサイトデザインの教科書 良いデザインとはUI/UXの結果として生まれるものですが、UI/UXの前段階であるヴィジュアルデザインもサイトの品質を上げる要素の一ひとつです。 ヴィジュアルデザインをおこなう上で根拠のある手法として「黄金比」というものがあります。 今回は、黄金比の解説と、事例を紹介いたします。 仕事ですぐに使えるAdobe Photoshopデザイン実践講座【オンライン受講可】 ※本記事は2014年7月25日に公開された記事をLISKUL編集部にて再編集したものです。 黄金比概要縦と横の比率が1:1.618のものが黄金比と呼ばれ、その比率で作られた長方形を「黄金長方形」といいます。 黄金長方形から短辺を一辺とする正方形を取り除くと、残る
Webサイトやモバイルサイトのワイヤーフレームがたくさん!でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
『Webデザインの骨組み「ワイヤーフレーム」を学ぼう』を受講しました! さっそくschooで授業を受けたので、復習のレポートエントリを書いていきたいと思います! 講義の内容をレポートしてくのではなく(schooさんに怒られそうなので…)、扱った内容の参考資料や参考リンクなどをまとめてみます! 今回受講したのはこちらの授業です! まずは『adobe Illusrorator』をインストールしましょう! 授業を受ける前に『adobe Illusrorator(体験版)』をインストールしておきましょう!体験版ですので、1か月間無料で使えます! グラフィックデザインソフト | Adobe Illustrator CC無償体験版ダウンロード ぼくと同じく、Illusrorator(イラストレーター)って???な方はたくさんいらっしゃると思います。講義の中で、予備知識のない人はこの動画を見
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載!実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その3 目標:わかりやすいワイヤーフレームを作成することができる 必要なもの:紙とペン 対象レベル:超初心者OK
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者/状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。 完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。 ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
最近になってやっとレスポンシブWebデザインに手を出しました。 今までは各デバイス用にhtmlやテーマを作り、ユーザーエージェント(見に来た人のデバイスやブラウザなど)を判別して見せるテーマを振り分けるという方法でやってました。 特にWordPressにはデバイスごとにテーマを振り分ける便利なプラグインがたくさんあるのです・・! が テーマを複数作るよりスタイルで振り分けるレスポンシブのほうが実は効率が良いのではないかと思い立ちました。遅いか。遅いよね! そこで、自分の「初めてのレスポンシブ!」の備忘録を使用・参考にさせてもらった便利なツールやオンラインサービス、参考サイトを紹介ながら書きたいと思います。 レスポンシブWebデザインとは デバイスをwebサイト表示の判断基準にするのではなく、 ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調
レスポンシブを前提にしたカンプ作成、ちゃんとできてますか? 変化の激しいWeb業界では、技術的変化やトレンドに合わせて現場でのワークフローも変わり続けています。 数年前まではPhotoshopやFireworksでしっかりとカンプを作りこんでスライスを切って、やっとコーディング…という流れでしたが、これも通用しなくなってきています。 今更書くまでもありませんが、今日ではエンドユーザーがWebを閲覧する環境も多様化しています。 そうすると、従来のデバイス毎にがっちりとカンプを作りこんで管理しておくというワークフローは無理が出てくるわけです。 今求められているのは、どのような環境からアクセスしても快適にコンテンツを見ることができるような、スケーラブル(拡張性のある)なレイアウトなのです。 そこで、カンプ作成の段階でもレスポンシブを前提としたワークフローの導入が必須になってきました。 とはいえ、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く