ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多
語られない「震災」－復興を支援する「ヤクザ」達の存在を海外メディアが報道
過去の大震災で、暴力団組員が被災者をサポートしていた……という話を聞いたことがある人もいるかと思います。国内メディアではほとんど報道されることがなかった彼らですが、今回の東北地方太平洋地震でも彼らが復興を支援していると海外メディアが報じています。 この記事は暴力団員が支援を行なっているという事実がなぜあまり報道されないのか、という観点から書かれたもの。あくまでも「こういうケースもないことはない」という視点からのルポルタージュであることに注意が必要です。 筆者・ジェイク・エイデルシュタインは元読売新聞の記者で、2006年から2007年まで日本での人身売買に関する調査をアメリカ政府の資金援助のもと主導した。現在、日本の組織犯罪についてのエキスパートであり作家・コンサルタントとして日本・アメリカを拠点に活動している。彼はまた、日本の人身売買と戦うワシントンD.C.の団体ポラリス・プロジェクトの広
ウェブデザインをはじめるあなたへ - ウェブ雑記
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
レスポンシブデザインで右側に謎の空白ができたときの解決策 | ocws BLOG
この前、レスポンシブデザインを制作していたら突然というか気づかないうちに右側に結構な幅の空白が空いていました。あれ？おかしいなおかしいなと思ったので、そのときの解決策を試行錯誤も踏まえ載せてみます。 背景 今回のレスポンシブデザインはウィンドウサイズを縮めていったらそのまま全体的にしゅるしゅると縮小していくものだったのでwidthは基本的には%で設定しています。 気がついた時には空白はそこにいた。 とりあえず、一通り作り終え、スマートフォンで確認したときです。 あれ？斜めに動く。。。 まじすか。え、でもPCだと大j…空白あるわ。 うおーーい！（テストアップ3時間前）←ここから最終調整やなんやするのに。。。 viewportの設定 恥ずかしながらviewport設定するのを忘れてました。なんやなんや、原因これか。 <meta name="viewport" content="width=de
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
圏央道埼玉区間、31日15時全通 東名中央関越東北を接続 上尾道路も4車線に （乗りものニュース） - Yahoo!ニュース
2015年10月19日（月）、国土交通省とNEXCO東日本は10月31日（土）に開通予定の圏央道・桶川北本IC〜白岡菖蒲IC間10.8kmについて、開通時刻を15時にすると発表しました。 手放しでは喜べない？ 圏央道延伸、そこにある懸念 圏央道は1996（平成8）年3月に、まず青梅IC〜鶴ヶ島JCT間が開通しました。そして延伸が順次行われ、今回の、桶川北本IC〜白岡菖蒲IC間が開通することにより、圏央道の埼玉県区間（入間市・都県境〜幸手市・茨城県境、58.4km）は全線開通。東名高速と中央道、関越道、東北道が圏央道によって結ばれます。 また今回の圏央道開通に合わせて、現在は2車線で開通している上尾道路が4車線になります。 上尾道路は、新大宮バイパスの宮前IC（さいたま市）から国道17号の西側を通過し、国道17号バイパスに鴻巣市の箕田で接続する20.1kmの道路。現在は宮前IC〜県道上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
楽天テクノロジーカンファレンス2015 の見どころ、日本語版
studioloupe.com