ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
![ウェブデザインの文章レイアウト組みパターンを展開してみる | バニデザノート](https://cdn-ak-scissors.b.st-hatena.com/image/square/288681eadf5c3dd9aab8f2ca33f4f02408a628ec/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-81.fc2.com%2Fv%2Fa%2Fn%2Fvanidesign%2F11187260_968568719828247_3343970705641289934_os.png)
ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
Emmet(旧 zen coding)を、できるだけ覚えずに入門するための、考え方を紹介します。 zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で なんで面倒と思ったかというと、速さに気を取られて一文で(何行ものHTMLを一発で=爆速を再現するため)長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。 そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。 Emmetは、gitのようにサーバーとつないだり、Sassのようにコンパイルの設定が不要です。 必要なのは、使っているエディタにemmetのプラグインをインストールするだけ。 Atomだと、Emmet plugin Atom editorとか、sublime text だとこのあたりの記事が役に立つのかな。 (C
「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=
Sketch3は、ウェブサイトや、アイコンや、スマホデザインや、レスポンシブデザインなどのデジタルデザインに特化したデザインアプリです。 直感的で、定義をすればするほど速くデザインができるんですが、PsやFwと比べると、シンプルになりすぎてて「あの機能はどこなの?っていうかあるの?」って思うものがいくつかあったので、まとめてみたいとおもいます。
神棚って、なんか切り込みづらいトピックスなんですが。そんな切り込みづらいものにデザインプロダクトで切り込んでいる前衛的な方々がいらっしゃるようです。 今はパワースポット目的で神社を訪れてお札をもらって扱いに困っているひとや、厄除けのお参りでおみやげに持たせてもらうパターンで神棚に興味を持つ人もおおいとかそうでないとか・・。 ひとの暮らしに寄り添うという意味では、そういうモノに対してデザイナーが動くことは当たり前なのかも。そんな気軽な気持ちで紹介してみます。 ※あくまで日本の「文化」としての「神棚」として扱っています。いろんな宗教とか考え方に触れる気はないです。 出典:i-moconoco.com なんていうか。真ん中の白いのはもうiPhoneです。たぶんサイズは、もうちょっと大きいとおもいますが。お宮をレーザープリントして、少し窓を開けることで、神棚の扉が空いてる体(てい)をとっているとい
わたしがはじめてこういうtech系?のブログをやろう!って思った時期 世の中はアルファブロガーさんっていうのがもてはやされている時でした。 今はみんなみんながブロガーな風潮ですね。人気ブロガーになるためのセミナーがあって、 ハンコを押したみたいな広め方が広まってもいますね。 ちょっと話がそれました。今回は読まれているとか、人気ブログっていわれている人たちが だいたいやっていたことで、いいなーって思って最初の頃に参考にして、今も気に留めているポイントを書いてみます。 たとえば、新しいiphoneが発売されたからってレビューを書いたって、もともとそういう記事ばかり書いている人には勝てないんです。いまからブログを書こう、みんなに見てもらいたい、って思っているならなおさらです。 マクロすぎるキーワードは負けます。 それよりも、自分自身がどう思ったか。 いま、何を考えて、どういう風に感じているのか、
わたしが、ウェブデザインをする上で気をつけていることを書いてみようとおもいます。アクセシビリティとか、SEOとか、UIとか、ユーザビリティとか、そういうのができるだけ冒頭につかないような。 最近、ああいうキーワードが変にひとり歩きしていて、誤解を生みやすくなっている気がするので。 気をつけないと私も使っちゃうんですけどね。 「ホームページをつくりたい」「ウェブサイトをつくりたい」「ページを追加したい」そう思った背景には、何か理由があるはずです。 みんなに知らせたい:「会社をたてた」「事業をはじめた」「新しい商品を知らせたい」 運営側の気持ち的な部分:「デザインに飽きちゃった」「デザインが古くなったように感じる」「気分転換がしたい」 まわりの環境の変化:「担当がやめちゃって(その人しか使わないソフトやソースの癖などで)どうにもならなくなった」 といったこと。 ウェブサイトは基本的に公開される
グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。 完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。 ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。
googleからNexus7が格安で販売されていたり、microsoftからsurfaceが日本でも発売になったり、 ますますタブレットでのウェブビューイングが広まっていくのは必至でしょう。 そんななか、検索エンジンでもあるgoogleが推奨しているのはレスポンシブ表示。 今回は、そんなレスポンシブなサイトを作る際のブレークポイントをキーにして 実際どんなものが作られているかを交えて考えていきたいとおもいます。 ざっくり言うと、どのサイズでどの表示をするかというのをピクセル幅で切り替えていくポイントのことです。 320, 480, 600, 768, 1024 あたりで区切ります。 googleのドキュメントにもあるように @media only screen and (max-width: 640px) {...} のようなカタチでCSSを切り分けていきます。 1024と320のみのPC
デザインのアクセントになりそうな手書きフォントを集めてみました。 無料DL可能となっておりますが、 ライセンスなどは各フォントの詳細を御覧ください。 手書きフォント アームド・レモン 漢字もOKな無料手書きフォントの中ではバランスがよいフォントだと思います。 Sweetly Broken Halo Handletter Dear Joe 5 Casual Jellyka CuttyCupcakes Jellyka - le Grand Saut Celine Dion Handwriting 手書きフォントは、こんなふうに使うとかわいいです。 today is ひとこと日記アプリのtoday is にて、アクセントに使われています。 viera RB3シリーズが導く私らしいリラックスタイム タイトルを手書き風に。 リラックス感が表現されています。 ベーシックなフォントで見慣れたあとは ゆる
こんな風に使えます! dockに置くと、アクセスしやすくなります。 finderのカラム表示でも、こんなに見やすい。 デスクトップでも、こんな風に表示されます。 Mac OS X でのアイコンの変更方法 アイコンファイルと、アイコンを変更したいフォルダを右クリックして「情報」を表示 →図のようにアイコンファイルのほうのアイコンをコピーして 変更したいフォルダのアイコンへペーストすればOK♪ ダウンロードはこちら ※これは過去に配布していたデータの、再配布となります。 ※フリー配布ですが、再販はご遠慮ください。 ※個人のカスタマイズのために制作したものをシェアしております。 このアイコンを使って何かトラブルが発生した場合、責任はとれません。自己責任でおねがいします。
1ページで魅せるポートフォリオサイト風の動きのなかで 最近よく見かけるパララックス効果を採用したデザイン。 今回は縦にスクロールする際に、 スクロールの速度をレイヤーごとに調整して 視覚的に速い部分と遅い部分が起こるようなチュートリアルがありましたので 紹介いたします。 ▼One page website, vertical parallax http://www.webdesignshock.com/one-page-website/ このチュートリアルは、nike better worldというNikeのサイトから インスピレーションを受けて作成されています。 なので、こちらも見ておくことをおすすめいたします。 デモはこちらから。 大事なのは初期のBOXの定義(CSS)と それぞれのBOXがどんな動きをするのか (今回だったら特にスクロールスピード)を確認しておくこと。 いまブラウザの
ウェブサイトの制作には、いくつかのフェーズがあります。 企画→制作→構築→公開を何度もくりかえすこともあり、スパイラル方式なんて言われることもあります。 今回は、ウェブサイトの制作順序を書いてみたいと思います。 むかしはこういった文章をブログなどで書く方が多く、本もたくさんあったのですが 今は知識や技術に偏ったものがおおく、目に触れることが少なくなったのかもしれません。 もしくは、あたりまえのことだから言わなくなったのかもしれません。 しかしながら、ウェブを気持ちよく制作するために基本というのは重要なことだとおもい 再確認もこめてかきました。 ウェブ制作を行なっている人、 これからウェブの業界に入りたいとおもっている人、 これからウェブを発注する予定のある企業の方に読んでいただければいいなぁと思っています。 ・ヒアリング どんなサイトにしたいのかをお客様へお伺いします。 対象となるブラウザ
最近よくウェブデザイナーを目指しています!というプロフィールの twitterアカウントにフォローされることが多くなりました。 ウェブ系で働いている私としては、こうやって目指すひとが増えるのは とても嬉しいこと。 夢をみるだけでなく、会社に就職したり独立したりするまえに、 いまからできることを、書きだしてみました。 ●実際に働いているクリエイターさんのお話を聞く 本当はこれが一番早いんです。 本物のデザイナーさん、クリエイターさんに出会え、 本物だと気がつけたら、その人についていったらいいとおもいます。 何に興味があって、何を買って、いまどんな行動をするのか。 その理由は何なのか。 行動から考えてみると、答えに近づきやすいでしょう。 ただ、ウェブデザイナーの場合、会社でおつとめしている方でも会社員よりの人 クリエイター寄りの人、アルバイト寄りのひと 楽天などで商品登録をしているひと、マーケ
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く