大丈夫やで☆イラレでウェブデザイン【その4】たぶん世界で一番簡単なスライスの書き出し方 – クリエイター丙
Adobe Illustratorでウェブデザインを組む場合のコツをお届けするシリーズです。レイアウトが固まったら、次はHTML化するために画像が必要です。今回は、その画像の書き出しについてのお話です。 あんまり一般的ではないかもしれませんが、niaoはこんな方法で一気にスライスを書き出しています。画面も見やすいんです。 ご存じ? Adobe CCを安くする方法 名付けて……「黒四角法」 ああっ、なんか中2病っぽくなっちゃった！ こんな方法です。 新しいレイヤーを作る。名前は仮に「スライスカバー」。他のレイヤーはロックする。 画像で書き出したい部分に、四角形を描く。黒で20%くらいの透明にしておく（←これは好み）。 描き終わったらコマンドAして、「オブジェクト」→「スライス」→「作成」 「スライスカバー」レイヤーを非表示にして、「web用に保存」で一気に書き出す。 この方法のメリットは、全
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
Eシステム - エクセルをHTMLにテンプレートに合わせて一括変換するWEBツール
エクセルデータ入力フォームエクセルの画面からセル（もしくはCSV）をコピーし、下記フォームにデータをペーストして下さい。 A1 B1 C1 A2 B2 C2 A3 B3 C3 テンプレートサンプル： マイタグ： - - - ※[A]はエクセルA列、[B]はエクセルB列…と自動で置き換えます。 ※指定できる列は[A]～[Z]列まで ※<!--f-->から<!--/f-->までは最初だけ表示、<!--l-->から<!--/l-->までは最後だけ表示、<!--num-->はナンバリングするEシステム専用タグです。 ※作成したタグをマイタグ登録できます。再登録したい場合は、呼出ボタン右上の「-」アイコンをクリックして下さい。
WEBデザイナーの皆様！ExcelでHTMLを保存した時、余計なタグの多さに驚いた経験ありませんか？ - usawa's blog
例えばこのエクセルのデータ。 やっと表ができたぞ！ WEBサイトに載せるためにHTMLで書き出そう！ 選択範囲をHTMLに書き出し・・・っと。 うわっ・・・ 無駄タグ多っ・・・ 消すのめんどくさっ・・・ WEBデザイナー、WEBエンジニアの皆様、このような経験はありませんか？ そんな時はこのWEBツールが便利です。 [xls2tag] http://xls2tag.web.fc2.com/ 手順は簡単。 ①エクセルシートのセルを選択＆コピーし、 ②[xls2tag]のフォームに貼るだけ。 シンプルなテーブルタグが『変換結果』に表示されますので、 コピーしてブログやWEBページに貼ってください。 また、[xls2tag]は、 テーブルタグだけではなく、 リストタグやリンクタグ、 自分でタグのテンプレートをカスタマイズできます。 無駄な作業を減らして、効率アップしましょう♪
フロントエンド・エンジニアという肩書
フロントエンド・エンジニアという肩書 その他2011年12月14日 最近、フロントエンド・エンジニアという肩書が一部の制作会社で使われるようになってきました。 実は私の名刺にも、以前は「Webデザイナー」だったのですが、1年～1年半ほど前から「フロントエンド・エンジニア」に変わっています。 本記事では、「フロントエンド・エンジニア」という肩書について少しお話しさせていただきたいと思います。 一般的に「Webデザイナー」と呼ばれる方々の業務内容は実に幅広く、サイトのビジュアルを「デザインすること」だけではなく、情報の構造を整理・ラべリングし、適切な個所に情報を配置する「情報アーキテクチャ」も担当することもあれば、当然コーディングも行います。デザインを行うには、少なからずCSS・HTMLの知識が必要になってきます。一口に「Webデザイナー」といっても、非常に多種多様なスキルが求められます。 し
画像の「縦方向の最適化」って何!?たった数行でスマホビューを改善しよう！
webデザインの大きな問題の1つは、スマホビューにおける縦長画像。今回は「縦方向のレスポンシブ」を紹介します。思い付きで実装してみたのですが、驚くほどスマホビューが改善できたので、そのJavascriptのコードを紹介します。 デモを見る 1「縦方向のレスポンシブ」って何？縦長画像をスマホで見たサンプル今回の問題は、縦長画像のスマホビューです。iPhoneやAndroidの解説記事などでスクリーンショットを載せる場合、縦に長い画像を利用しますよね？するとスマホビューではサンプル図のように、画像が画面全体を占領してしまうことが少なくありません。 max-width:100%を設定することで「横方向」には最適化していても、「縦方向」には最適化できていない例です。画像はやっぱり文字と一緒に見たいですよね…。max-height:...%は「画面の高さ」ではなく「コンテンツの高さ」が基準になるので
バイク買取｜ネットの無料査定で買取額をチェック！
このサイトではギャッベの雑学に関する情報をご紹介しています。 日本人の多くがまだ知らないこの手織り絨毯の魅力を知れば、部屋に敷きたくなるかも知れません。 シンプルな天然素材でできているため、この敷物はホットカーペットや床暖房の上に敷けるというメリットがあります。 そのため冬に使用するのにぴったりでしょう。 イラン生まれのこの手織り絨毯は、歴史も古いのが特徴です。 なんと3000年前から使われていたという話もあります。 日本人の多くがまだ知らないギャッベの魅力に迫る！ギャッベの雑学を紹介 インテリアに関心がある人の中には、床に敷く絨毯にこだわりたい人もいるでしょう。 そのような場合には、ギャッベと呼ばれる手織り絨毯を選ぶのも良いかも知れません。 日本でも多くのファンを獲得しつつあるギャッベは、イランの遊牧民の間で古くから作られてきた敷物です。 独特の踏み心地や素朴な風合いが魅力となっています
Webアプリをあっという間にカッコよく！ BootstrapによるレスポンシブWebレイアウト
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
グリッドシステムベースのデザインをするときに気をつけること | バニデザノート
グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。 完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。 ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。
本格バナー制作で学ぶGoogle Web Designerの使い方 (1/4)
Google Web Designerの基本からアニメーションの作成までを学ぶ連載。第3回では、Google Web Designerを使って実際の業務を想定したクリエイティブバナーを作成します。 基本操作については前回の記事で解説しましたので、今回は主にアニメーションモードの詳しい使い方を中心に学びましょう。 Google Web Designerで実際にクリエイティブバナーを作成しよう 今回作成するのは、次の2つのバナーです。 1つ目は、「クイック」アニメーションモードで制作した不動産会社のバナーで、夜景の写真が横にスライドするシンプルなものです。2つ目は、「詳細」アニメーションモードで制作したカフェのバナーで、スライドとフェードを組み合わせて、複数ページを切り替えます。 「クイック」アニメーションモードで作る不動産会社のバナー 最初に、背景が横方向に流れるような動きのバナーを作りまし
ブラウザ上で「Mac」が動くサイトがスゴい
今の Mac の OS は「OS X（テン）」だ。当然ながら、「OS X」になる前は、「OS 9」、その前は「OS 8」、そしてその前は……「System 7」。なんと日本では「漢字Talk（かんじトーク）」と呼ばれていたのだが、古くからのMacユーザーならば「懐かしい」と思うだろう。 ということで今回は、そんな「漢字Talk」時代の Mac がブラウザ上で動くサイトをご紹介したい。その名も『PCE.js』。動く OS は「System 7.0.1」。サイトに行くだけで「Macの起動」から始まるのだ！ サイトに行ったら、まずは “音” にも注目してほしい。起動音は「ピーン」だ。起動ドライブを読み込んで、「Welcome to Macintosh」の文字が表示された後、白黒時代のデスクトップ画面が静かに表示される。おぉぉ……Macだ。まさしく昔のMacintoshだ!! マウスカーソルを M
年寄りを困らせる「レスポンシブWebデザイン」 | スタッフルーム | 日経BPコンサルティング
スマートフォン利用者に配慮して「レスポンシブWebデザイン」を採用するサイトが増えています。このデザインは1つのHTMLファイルで、パソコンとスマートフォン、それぞれに適したページを表示できるのが特長。特に若い人をターゲットにする大学サイトで注目を集めています。Googleも推奨する優れた手法ですが、デメリットもあります。話題になることが少ない、ユーザビリティ上の問題点について指摘しましょう。 「レスポンシブWebデザイン」（以下、レスポンシブ）とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます（中には、タブレット向けデザインを用意しているサイトもあります）。 レスポンシブを採用するサイトは最近増えていま
サイト制作時のデザインやコードの「ぶれ」をなくすスタイルガイドを作成するためのテンプレート -Style Guide Boilerplate
ウェブサイトの制作時で大切なことの一つは、デザインやコードの「ぶれ」をなくすこと。 ウェブサイトを制作する際、プロジェクトに関わる全ての人が参考にできるデザインのスタイルガイドを作成するBootstrapベースのテンプレートを紹介します。 Style Guide Boilerplate Bootstrap Edition Style Guide Boilerplate -GitHub スタイルガイドは作成した時の利点が多く、もしまだ未の人は是非チャレンジしてみてください。 また、もう利用している人には、Bootstrapベースで簡単にスタイルガイドが作成できるので試す価値があると思います。 スタイルガイドを導入する利点 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイト
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Audioの制御やOSCデータの送信が可能なオーディオUI向けJavaScriptライブラリ・「NexusUI」
React App
Web上でDTMが可能なオーディオアプリケーション・「hya.io」
Engadget | Technology News & Reviews
