デザインの本質とはちょっと違うのですが、ウェブデザイナーに必要な技術のひとつ、広告などに使う「目立つ・理解されやすいウェブデザイン」の手法をまとめてみました。 メリハリをつけて、目に留めてもらえるようなデザインを目指しましょう! (すみません、タイトルふざけました、中身はいつもどおりマジメです。)
![愛され♡「メリハリ」ウェブデザインを作る!注目を集めたいときのデザインテクニック | バニデザノート](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)
「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=
Atomは、Github製エディタです。私のコーディングの主力エディタは、mi→Espresso→Codaと移ってきて、この数年はずっとCodaだったんですが、Sublime Textの人気っぷりが気になって、使ってみて(残念ながら恋に落ちなくて)スルーしてAtomを使ってみています。 今のところフリーソフトなので、敷居も低くて素敵ですね。 エディタもいろいろありまして。GUIでボタンをつくってマウスだけですべて操作できちゃうCodaみたいなもの(シンプルなエディタに多いタイプ)と、emacsみたいなコマンドラインでぐりぐり書くもの、EclipseやXcodeみたいにIDE(統合開発環境)と言われるすごく多機能でコマンドもカスタマイズも設定ファイルにも直書きできちゃうようなものがあります。 で、Atomはというと、GUIでそこそこ操作ができるけど、IDEほどパワフルではなくて取っ付き易くて
アニメーションgifが復権してきているようなので、方法のメモ。写真をコマ撮りしてレイヤーに時系列で並べていくことでもできますが、今はmovとかスクリーンキャストとかをアニメgifにするのが新しいのかな。とおもいます。 まずは、動画ファイルを用意します。カメラから取り込んだものや、スクリーンキャストならQuickTimeなどで録画して保存したものを利用できますね。 Premireや、iMovieなどで、アニメーションgifにしたい部分だけ抽出して書き出ししておくとベストです。 (Photoshop側の取り込み時にも読み込み範囲を設定できるみたいなのですが、Photoshopって読み込みの部分、若干弱いイメージがあるので。)
WordPress案件、前からいろいろ請けさせてもらっているんですが だんだん「簡単にー」っていう範囲から外れてきていて どんどん予算もかさばっている現状があります。私なりの把握していることを書いてみます。 WordPressが広まりだした頃から、アタックを受けやすくなっているWordPress。 WordPressが動いて安くて便利なロリポップでのアクセス制限のハードルが高いです。 一時期特にロリポップがやっていた「簡単インストール」でやっていたロリポップ加工版のやつに穴があった(?)か何かで、ファイルアップロードしているものにも影響が出てくるように。 ログインのアドレスを変えてみたり、サーバーに関係なくアタックへの対処法っていろいろあったんですが、どんどん.htaccess制限されちゃって。 個別IPアドレスを通す設定にしてるものだから、「IPアドレスって何?」って人にはすごいハードル
フラットデザインを作成する際に参考になりそうなフリーアイコンやUIキット。「フラットデザイン=手抜き」というのでは、クオリティが保てません。ディテールを確認し、フラットデザインの特徴を捉えていきましょう。
現在は、以下のようなプラグインをサポートしているようです。 accordion シンプルなアコーディオンナビゲーション button マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える checkAll チェックボックスの一括選択 fixHeight 要素の高さを揃える ie6PngFix Internet Explorer 6でも透過PNGを使えるようにする ie6PositionFixed nternet Explorer 6でもCSSの position:fixed を使えるようにする imgSwap a要素をクリックして、既存のimg要素の画像を切り替える lightBox jQuery lightBoxプラグインを読み込む overlayOthers 指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指
photoshopでドットのラインを描く方法をまとめてみます。 さいごに、配布ブラシもあります。 Fireworksなら、線を描いて、プロパティーから「ストロークを編集」とすると きれいなドットラインが描けるのですが photoshopではそういった機能がないんですね。 ドットラインを描くにはどうしたらいいのか探してみたら、みなさん色々な方法で やってましたので、その方法をご紹介。 ブラシを使う(1)- 間隔設定を使う ブラシ設定の「間隔」という設定を100%以上にすると破線になります。 %設定は、割り切れる数字とか、キレイな数字のほうがうまくいく気がします。 参考:http://www.dougamanual.com/blog/247/1430/e6849.html ブラシを使う(2)- 登録されたブラシ 小さい四角形をつくって、その中に一つの「-」を描き、「ブラシを定義」し 上記と同様
無料もしくは、稟議や提案を出しやすい価格のストックフォトサービスのなかで 最近調べたり、検索したりしたものを中心にまとめておきます。 写真素材って無料だからいいってわけではなくて すこしのお金でライセンスが取得できるのであれば そちらのほうが後々楽だったりしますので、無料と有料は混ざっています。 「よく使う・参考にする」サイト PIXTA ピクスタ 【有料】Sサイズ525円〜。DLできるクレジット付きカンプが大きいので デザイン案などで重宝します。 ライセンス 写真素材 足成 【無料】人物写真・風景写真・動物写真など。 利用ガイド 「気になる」サイト modelpiece 【無料】フリーの人物素材を配布しているサイト PAKUTASO 【無料】自然系・人物・動物系 ロイヤリティーフリー素材のストック・フォト 【有料】最近できたばかりのよう。Sサイズで189円〜。今後の素材の充実に期待。 海
デザインのアクセントになりそうな手書きフォントを集めてみました。 無料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シリーズが導く私らしいリラックスタイム タイトルを手書き風に。 リラックス感が表現されています。 ベーシックなフォントで見慣れたあとは ゆる
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音=見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか? どんなふうに感じましたか? この例では、Bのほうに大きな余白を与えました。 4隅すべて同じぐらい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く