ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。 <!-- .container is main centered wrapper --> <div class="container"> <!-- columns should be the immediate child of a .row --> <div class="row"> <div class=
photoshopの「レイヤーからの画像アセット」機能。 前から気になっていたのですが、やっと試せました。 これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの 使い方をすこし解説します。 今までは、psdカンプを作成したあと、「スライス」ツールを使って スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、 「Web用に保存」ウィンドウを開き、出力設定を行い、 さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。 「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが 上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。
いわゆる「flashライク」といわれるインターフェイスで、html5なアニメーションを作れるアプリを試して比較してみました。 「Edge animate」「hype 3」ともに、アニメーションを作れるアプリです。 写真をスライドさせたり、ボタンを置いたり、頑張ればゲームも作れます。 読み込む情報にもよると思いますが、出来上がったものはflashよりは軽い印象。 バナー広告や、ネット上のプレゼンテーション、アイキャッチなどに利用します。 スマホ用のビューも作れますし、レスポンシブにもでき スマホやタブレットでも再生&利用できるのが特徴でしょうかー。 PC上ではIE8+他モダンブラウザで再生対応しています。 (古すぎるパソコンだと再生できないかもですね。) 1)画像データをドラッグ&ドロップして配置 2)「録画」ボタンを押して、キーフレームを置きたいタイミングを選択→位置などを指定 3)イージ
ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね?」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてすごいなーとおもったアプリや、無料でもざくざく使えそうなものまでご紹介。 Moqups Free Plan (offers 2 active projects and 5MB of storage) Monthly:Standard active project 10 で $9〜 ログインしなくても無料で組めます。 960gsグリッド表示可能です。 ほぼコンポーネント揃ってます。ほぼ装飾なしなステン
すこしラインは硬めですが、ネットショップで使えそうなアイコンが多いのが便利そうです。 https://dribbble.com/shots/1791904-54-Free-e-commerce-icons?list=searches&tag=freebie&offset=11 商用可かどうかは、各サイトでご確認を。 ご参考にどうぞ。。 関連記事 「デザイン」という思考(概念)をまとめてみる。 2015/04/18 photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。 2015/04/15 プレゼンやセミナーのスライドのばに的考え方と、作り方。 2015/02/22 ストロークスタイルのフリーアイコンセットいろいろ。 2015/02/09 Webサイトデザインのストックの探し方と、利用のしかた。 2015/01/12 FontAwesome のPhot
よいデザインをトレースして、空間やサイズを感覚で叩きこむのが、すごく大事だなぁと改めて思うようになりました。たとえ全体の雰囲気が好みでないとしても、サイドメニューや、ひとつひとつの作り込みで勉強になるところは沢山あります。 そんな勉強になりそうなデザインの探し方と、既にまとまっているサイトを紹介します。 デザインの好みに関係なく、「利用できる」「使えている」サイトには、何かその理由があるハズです。「使いやすい」「ほしいものがある」「わかりやすい」など。 そういったサイトをピックアップします。 そこから、デザインだけではなく、サービス自身や運営方法にも目を向けます。 サービスと、使いやすさが重なる部分をピックアップして、スクリーンショット→保存。 あとでまとめて見返すと、自分が「なぜ利用しているのか」の理由が見えてくるかも。 →「よく使う」という意味での好みを把握しておくことで、さらに広いと
WordPress案件、前からいろいろ請けさせてもらっているんですが だんだん「簡単にー」っていう範囲から外れてきていて どんどん予算もかさばっている現状があります。私なりの把握していることを書いてみます。 WordPressが広まりだした頃から、アタックを受けやすくなっているWordPress。 WordPressが動いて安くて便利なロリポップでのアクセス制限のハードルが高いです。 一時期特にロリポップがやっていた「簡単インストール」でやっていたロリポップ加工版のやつに穴があった(?)か何かで、ファイルアップロードしているものにも影響が出てくるように。 ログインのアドレスを変えてみたり、サーバーに関係なくアタックへの対処法っていろいろあったんですが、どんどん.htaccess制限されちゃって。 個別IPアドレスを通す設定にしてるものだから、「IPアドレスって何?」って人にはすごいハードル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く