最高のモックアップツールかもしれないBootstrap Studio - Qiita
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
Bootstrapはすでに下火に——海外の開発者1600人に聞いたCSS開発のいま
WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します！ フォローアップコメントと考察、昨年の結果との比較、コメント欄に寄せられた質問の回答も掲載します。 アンケートの結果は以下を参照してください。 結果は上下の矢印でめくりながら見られます。 調査の目的 まず、読者からは調査の目的とフィードバックで得られることについて、質問がありました。私がSitePointのエディターとしてもっとも優先しているのは、読者を理解することです。いろいろな技術に関して、
Bootstrap実践編 Sass,CSSを追加してオリジナルデザインにする（４） - マンガでなれる？WEBデザイナー講座
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyph
Bootstrap実践編 デザインソフトでデザインを作り込む（３） - マンガでなれる？WEBデザイナー講座
前回からの続きで「Bootstrap実践編 デザインソフトでデザインを作り込む（３）」の説明を始めます。 前回のタイポグラフィ、サイトカラー見本にロゴを作成して追加しました。 通常、Webデザインはロゴマークのイメージに合わせて作成します。 今回は無料ベクター素材のサイトなのでロゴマークはペンのイラストを描きました。 ロゴのフォントはペンツールで書いたイメージです。 ロゴデザインとWeb制作の同時発注は稀なので Web制作を依頼された場合はデザインカンプを制作する前に クライアントにはロゴの手配をしてもらいます。 サイトによってはファビコン画像が必要な場合もあります。 2. Webデザインを作り込む アートボードを作成した後はBootstrapの12カラムに合わせてグリットを用意します。 1からグリットを作成するのは面倒なのでBootstrapのテンプレートを使います。 http://bo
Bootstrap実践編 スケルトンサイトから制作するWeb制作短縮方法（１） - マンガでなれる？WEBデザイナー講座
えっ！？HTMLだけでできるんですか。 私はインブラウザでコーディングするとデザインイメージ湧かないから苦手なんですよ〜。 逆に遅くなっちゃいますよ。 クライアントだっていろいろ修正変更とか言ってきそうじゃないですか。 デザインとコーディングを同時に修正するなんて大変すぎます。 クライアントと案件内容にもよりますがスケルトンサイト（ワイヤーHTML）から見せながら制作した方がデザインが通りやすく納得されやすい事が多かったです。 初期の段階でサイトの骨格がすでに決まっているのでコーディング時間を大幅に短縮する事も可能です。 デザイナーはデザイン作業に集中できます。 （※全ての案件に対応できるわけではないので案件によってはワークフローを変更する必要もあります） 今回紹介するワークフロー （１）スケルトン（骨格）サイト制作 Bootstrap3のジェネレーターを使って作成する （２）デザイン作業
Bootstrap実践編 基本的な書式、タイポグラフィー、サイトカラーを作成する（２） - マンガでなれる？WEBデザイナー講座
どういった内容のサイトか、雰囲気やイメージを膨らませながら サイトカラーや使用するフォントを決めます。 私はIllustrator、Photoshopなどでカラーを作成する時はAdobe Colorで色見本を作成します。 今回はSketchでカラーを作成するのでMaterial Design Color Paletteというプラグインを入れてカラーを作成してみます。 Material Design Colorというサイトから色をコピーすることも可能です。 マテリアルデザインのカラーなので最近のWebデザインの流行に合わせたカラーが作成できます。 色の明度によってもサイトの印象も違ってきますので こういったツールを使用すると制作するサイトのカラーを容易に検討することができます。 今回制作するサイトはベクター素材を配布するフリー素材サイトなので デザイン性のある明るい配色にしたいと思いました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブログ | ウェビングスタジオ