レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット
この記事は2016年3月27日の記事を再編集しています 多くのホームページに導入されているレスポンシブデザインですが、レスポンシブ化することによってどのようなメリット、またはデメリットが発生するか把握できていますか？ 「Googleが推奨しているから」、「流行しているから」、という単純な理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、自社のホームページに最適だと判断したうえで利用するのが良いでしょう。 今回は、レスポンシブデザインのメリットとデメリットを解説します。 レスポンシブデザインとは そもそもレスポンシブデザインとは何を指すのでしょう。 Googleは、 ユーザーの デバイス（パソコン、 タブレット、モバイル、非視覚的 ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）表示を変えること
Webデザイナーのキャリアを考える【制作会社と事業会社の違い】
Webデザイナーの求人・案件でよく目にするのが、Web制作会社と自社サービスを運営する事業会社。Web制作会社の求人・案件には、仕事内容のところに「大手サイト、有名企業Webサイトの制作」「受託」といったキーワードが、自社サービス会社の求人・案件には「自社ブランドサイト」「自社サイト」といったキーワードが多く見られます。 それぞれのビジネスモデルでは、仕事内容や必要なスキル、職場環境など具体的にどのような違いがあるのでしょうか？現役Webデザイナーたちの声をもとに、探ってみました。 ＜この記事に関連する記事＞ フリーランスのWebデザイナーになるには？【必要な準備や仕事の始め方を解説】 フリーランスWebデザイナー仕事の取り方【エージェント利用はおすすめ？】 【Webデザイナー向け】後悔しない会社の選び方！未経験必見 目次 制作会社と事業会社における仕事内容の違い Webデザイナーが制作会
有名企業・ブランドのロゴで採用されているフォント15選
企業のロゴをデザインする際に重要となる要素の一つが「フォント」です。 どのフォントを使うかによってイメージが大きく異なりますので、目的としている企業のコンセプト、イメージしているものに近いものを選ぶ必要があります。 そんなロゴデザインでぜひとも参考にしたいのが有名企業、ブランドが採用しているフォントです。 誰もが知る大手企業でも意外に定番のフォントを使っていたり、既存のフォントをベースにユニークなアレンジを加えている企業があったりと、デザインのヒントが隠れています。 今回は、有名企業・ブランドが採用しているロゴフォントをまとめてご紹介します。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを
ロリポップ！でWebサイトのデータをzip圧縮してバックアップする方法
アクセスするだけでWebサイトを丸々バックアップ このブログは「レンタルサーバのロリポップ！」を利用していますが、デフォルトでファイルのバックアップツールが用意されていません。 そこで今回「アクセスするだけでWebサイトのデータをzipに圧縮して保存する」PHPのコードを書きました。 バックアップ用のPHPを作成 まずはテキストエディタへ下記のコードをコピー・ペーストしてください。 <?php set_time_limit(60);//圧縮するファイルが多くて60秒でタイムアウトする場合は時間を伸ばしてください $backup_dir = "./example";//バックアップするディレクトリを指定 $new_file = "example.zip";//zipファイルのファイル名を指定 system("zip -r $new_file $backup_dir > /dev/null")
あまり知られていないけど超便利！Webデザイナー向けPhotoshopのショートカットのまとめ
Photoshopを使いこなすには、キーボードショートカットを覚えることも大切。Adobe系のショートカットは他のアプリより複雑ですが、用途が広く、非常に便利なものが揃っています。 数多くあるショートカットの中から、Webデザインの作業に役立つあまり知られていないPhotoshopのショートカットを紹介します。 Professional Photoshop Shortcuts for Web Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※画像は日本語環境のものに変更しています。 ドキュメントから複数のレイヤーを指定 レイヤーのコンテンツを複製 デザインの補助となるガイドやグリッドを一括で非表示に 選択範囲やシェイプを正確なサイズで正確に配置 テキストの編集状態を終了 選択範囲やシェイプを描画色・背景色で塗る 複
[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー
画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。
![[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー](https://cdn-ak-scissors.b.st-hatena.com/image/square/97e241cb850cccb7e305aced9830b1ed4c5cf3e3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015081001.png)
制作技術は見て盗め？オンラインで作業中の様子を公開している動画サイト
2015年8月10日 Webサイト制作, 便利ツール 以前、すでにWeb制作者として就職している方から「まわりの同僚のように早く作業ができない」「作業の効率のいい進め方がわからない」という悩みを受けたことがあります。作業の効率化について紹介しているWebサイトや書籍も多く見つけられるかと思いますが、実際に手を動かしているところを見るのもひとつの方法です。他の人がどう作業を進めているか、見てみましょう！ ↑私が10年以上利用している会計ソフト！ 人がコーディングしているところを盗み見 「盗み見」なんてあまりいい響きではありませんが、賛否はどうあれ「技術は見て盗め！」という昔からの教育方針も存在します。会社の先輩、学校やコワーキングスペースの凄そうなオーラを醸し出している人の作業を見てみるといいかも。もちろん、絶対に作業の邪魔はしないようにしましょう！ 「技術を見て盗む」メリット 作業の新しい
パッとWebデザインのカラーを抽出して可視化してくれるウェブサイトの「配色」解析ツール
Web Colour Data URLを入力するだけ。ね、簡単でしょう？ どの色をどれくらいの割合で使っているのかんかを手軽に確認出来ます。 こちらと合わせて読みたいところですね。 カテゴリー別配色アイデア100 | Webクリエイターボックス配色センスが全くない？それならマテリアルパレットをちょっと使ってみて？ | Flips Blog Web担の小技 ちなみに解析は無料でできますが、解析するとNew！のところにばっちりサイトが出ますので、そのへんだけご理解の上ご利用を。 配色解析ツール ウェブデザインデータ http://webcolourdata.com/ それでは、また。
Adobe CCをお得に契約する方法（個人事業主向け）
本来は月額 ¥5,000 かかる Adobe Creative Cloud をお得に契約する方法というと、よく紹介されている方法は「社会人でも入学できる、通信制の学校やWebデザインスクールに入学してアカデミック価格で契約する」というものですが、入学手続きが必要な上にあまり必要のない教材費がかかったりします。 そこで、個人事業主向けによりベターな方法として「日本イラストレーション協会を経由してアカデミック価格で契約する」という方法を紹介します。 購入方法 個人事業主の場合、売上が大きかった翌年は健康保険料が大きな負担となってしまうことがあり、それを防ぐために 文芸美術国民健康保険組合 などに加入されている方もいると思います。 Webデザイナーが文芸美術国保に加入する場合、日本イラストレーション協会 などに加入する必要がありますが、 日本イラストレーション協会 のトップページ下部にあるバナー
白く撮れた桜をきれいなピンク色に補正する方法(Photoshop)
Photoshopで白く撮れた桜をきれいなピンク色に補正します。 桜はやっと咲いたと思った途端、あっという間に満開ですぐに散り始めてしまいますね。桜をカメラに収めると、あのきれいなピンク色がなかなか出にくい場合があります。 今回はそんなきれいな桜をよりきれいなピンク色に補正して、春らしい温かみのある桜の写真にしたいと思います。
最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント | バニデザノート
Emmet（旧 zen coding）を、できるだけ覚えずに入門するための、考え方を紹介します。 zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で なんで面倒と思ったかというと、速さに気を取られて一文で（何行ものHTMLを一発で＝爆速を再現するため）長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。 そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。 Emmetは、gitのようにサーバーとつないだり、Sassのようにコンパイルの設定が不要です。 必要なのは、使っているエディタにemmetのプラグインをインストールするだけ。 Atomだと、Emmet plugin Atom editorとか、sublime text だとこのあたりの記事が役に立つのかな。 （C
[CSS]使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素
CSS3のセレクタには便利なものがたくさんあり、複雑なHTMLやJavaScriptを使用しなければ実現できなかったことが非常に簡単なコードで実装できます。 Webページでよく利用されるテクニックに役立つ便利な5つの疑似クラスと疑似要素を紹介します。 5 Lesser Used CSS Selectors 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 疑似クラス・と疑似要素を使おう E:empty E::first-letter, E::first-line E:not(セレクタ) E:lang(fr) E:target 疑似クラス・と疑似要素を使おう もしあなたがCSSの新入生なら、あなたが使うセレクタはおそらくclassやidや要素名がほとんどでしょう。実はCSSで利用できるセレクタは、38種類あります（参考: Selector
![[CSS]使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素](https://cdn-ak-scissors.b.st-hatena.com/image/square/74174ecfeac99fc45dc37b0a40bfc40eea6c4183/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080410.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
日本の伝統的なデザインは美しい、和の柄や文様・和紙・折り紙・千代紙などの癒やし系素材のまとめ
要素をタイル状に並べる軽量プラグイン「Freetile.js」 | バニデザノート
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
Retinaディスプレイ対応！手描きのゆる～いデザインのアイコンフォント素材 -Handy Icons
更にかわいいフォントになった！女子高生が書くような文字をイメージした日本語のフリーフォント -JKゴシックM
