Webサイトの制作や運用を初心者向けに解説

こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

こんにちは、あんみつ（@murata_atsumi）です。 この記事はCAMPHOR- Advent Calendar 2014の20日目の記事です。 私ブログが超苦手で普段からあんまり書かないから、何書こうか迷ったのですが、 一応CAMPHOR-には主にデザインの部分で関わることが多いので、 デザインのことを書こうと思います！ はじめに エンジニアの皆さん、そしてそうじゃない皆さんも、たまに『メイン画像』を作らなければいけないときがあるんじゃないでしょうか。 メイン画像というのは、こういうのとか （引用：https://www.cyberagent.co.jp/recruit/fresh/internship/ ） （引用：http://tokyometro10th.jp/future/opendata/ ） こういうのとかですね。 または、Facebookページのカバー画像や、OGP用

【画像表示の不具合について】 皆様方へは、ご迷惑をおかけし大変申し訳ございません。 現在もまだ、一部の画像に関しまして反映されない不具合が継続しております。 現在、修正にあたっております。復旧まで今しばらくお待ち頂きます様、何卒お願い申し上げます。 フォト蔵　システム部 【写真検索の不具合について】 皆様方へは、ご迷惑をおかけし大変申し訳ございません。 現在、「写真検索」におきまして、検索後ページに何も表示されないなどの不具合が発生しております。 調査並びに修正にあたっております。復旧まで今しばらくお待ち頂きます様、何卒お願い申し上げます。 フォト蔵　システム部 【画像タイトル及びタグ入力における不具合について】 皆様方へは、ご迷惑をおかけし大変申し訳ございません。 現在、フォト蔵は、画像タイトル及びタグ入力におきまして、後に記載の漢字が含まれる場合、タイトルが表示されないや、文字化けする

インク流量は、ブラシにテクスチャを設定した場合に効果が大きく現れる。 インク流量はテクスチャの掠れ具合を制御するために使う。 インク流量の割合が低いほど、テクスチャが掠れるようになる。 不透明度の割合が低い場合に、ひと筆で同じ場所を擦るように描いても色の濃さは変化しないが、 インク流量の割合が低い場合は、ひと筆で同じ場所を擦るように描くと段々と色が濃くなっていく。 ▼テクスチャを設定すると、インク流量の効果がよく分かる。 ▼テクスチャを設定していない通常のブラシでは効果が全く現れない。 ▼テクスチャを設定していない通常のブラシでも、割合が1～8%の間には効果が現れる。 不透明度を下げた場合と違い、掠れたようなブラシになる。 ▼どちらもストロークを重ねると濃くなっていく。 ▼ひと筆で同じ場所を往復させると、インク流量のほうは、段々と濃くなっていく。

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ

ソーシャルアプリ事業部でデザイナーをしております。 こーたと申します。 どうぞよろしくお願いします。 今回は普段仕事でよく使う、illustratorの 「覚えなくてもいいけど覚えておくとちょっと作業が楽になる」 そんな小技を紹介したいと思います。 「Ctrl」+「Ｓ」くらいのシンプルさです。 覚えなくてもいいけど、覚えて頂けると幸いです。 とっくに知っているよ！という方はささっと読み流してください。 どこでも色を拾えるスポイトツール。 この画像のこの色を使いたい！ でもカラーパレットから色を探すのは大変。。。 そんな場合は、フォントからグラデーションまで、 何でも吸い取ってくれる万能なスポイトツールでアートボード外の色も吸い取ることができます。 現状、ピンク色ロゴを、デスクトップ上の参考画像（カメの甲羅）の色に変更したいと思います。 まずは、色を変更したいロゴを選択したら、ツールバーから

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

商品をより魅力的に伝える。それがコピーライティングの技術です。 実際の商品・サービスはすごく良いものだったとしても、その良さをすべての人に口頭で伝達していくには限界があります。 そこで、DMやチラシ、広告等、色々な方法で大勢の人へ広めていくわけですが、そのときにきちんと商品・サービスの魅力が伝わらないと、消費者があなたの提供する商品やサービスを手にとることはないでしょう。 そこで必要なのが、より魅力的に魅せる文章。つまりコピーライティングの技術です。 例えば、あなたは下記のどちらの効果が高いと思いますか？ →上記「A」「B」で比べたとき、効果は「B」の方が3倍程度、高い結果となりました 「A」は美容整形を受けたい人の心情を表しており、コピー的にもキャッチーな印象ではありますが、具体性に欠けるところがあります。 一方、「B」はつまらないコピーに感じるかもしれませんが、ユーザーに対しメリットを

作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ

調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. あなたはSEOでビッグキーワードでの上位表示に固執していないだろうか？ 残念ながら、ビッグキーワードでの上位表示に固執する方、または固執していた方に限って、Googleからペナルティを受けて検索圏外になってしまったという方が多い。 ハミングバードアップデートによって、Googleのアルゴリズムが大きな変化を見せた今、コンテンツの質も量もない状態では、どんなキーワードでも上位表示を達成することはできない。 逆に言うと、コツコツと良質なコンテンツを作り続けていれば結果的にビッグキーワードも攻略できるようになっている。 例えば、弊社のクライアント様の例では施策開始後３ヶ月目で、あらゆるビッグキーワードで３位以内に表示されるようになった。これは被

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WordPressでの記事の投稿はサイト運営の核となる作業だ。 弊社が運営しているバズ部はもちろんのこと、クライアントサイトでもWordPressを使っており、全てのサイトがSEOだけで何万、何十万のPVを集めることに成功している。 その要因の一つが、WordPress の投稿方法に細部まで徹底的にこだわっているからだ。ここでは、WordPressに投稿する方法とともに、集客を最大化するための方法を紹介していく。 実際に弊社も WordPress に記事を投稿する時に守っている。ぜひ、あなたもこの通りに実践してみて欲しい。 具体的には、この記事で主に以下の内容を解説している。

レストランで魅惑の一皿に出会ったとき。あるいは、とっておきのレシピで作った手料理がいつになく上手に仕上がったとき。｢この料理を写真に撮ってみんなに見せたい！｣と感じませんか？ FacebookやTwitter等のSNSでは、日々たくさんの料理写真が共有されています。でも、なんだか私の料理写真はあまり美味しくなさそう......。料理の写真って、どうすれば美味しそうに撮れるの？ なぜか全然美味しそうに見えない私の写真に｢いいね！｣は付かず......。実物はもっと素敵だったのに！ 困ったときはプロに聞くのが一番早い。というわけで、料理専門の写真教室｢フェリカスピコ｣を主宰するフォトグラファーの佐藤朗さんに、かわいく美味しそうな料理写真を撮るコツを習うことにしました。 カメラは、7月27日にFUJIFILMから発売されたばかりの｢X-M1｣を使用。機械に弱い私は内心不安だったのですが、必要なポ

Photoshopで吹き出しイラストを作ります。 吹き出しイラストは吹き出しイラストを作成する方法（イラストレーター）でもご紹介しましたが、イラストレーターで作る事が多いです。 Photoshopにもカスタムシェイプに吹き出しのイラストが搭載されています。ただ今回は、図形ツールを使用してオリジナルの吹き出しイラストを作成したり、カスタムシェイプを変形・組み合わせて作る吹き出しイラストも説明していきたいと思います。 目次 1.カスタムシェイプの吹き出しイラスト 2.図形やカスタムシェイプを組み合わせて作る吹き出しイラスト 3.パスで吹き出しイラストを作る 4.作った吹き出しイラストを部分的に変形する 5.吹き出しイラストの縁取り・塗りつぶし・模様の付け方 Photoshopにはあらかじめ数種類の吹き出しイラストが用意されています。 カスタムシェイプツールを選択し、オプションバーのカスタムシェ

Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。 HTML5とは、WHATWGおよびW3Cが、HTML4に代わる次世代のWEB環境として、策定を進めている仕様です。 HTML5を簡単に説明すると、今まで複雑だった処理を簡単にし、HTMLデータの意味をより具体的に表現できるようになります。 現状ではHTML5非対応のブラウザもありますが、少しずつ非対応ブラウザもバージョンアップによって対応されていっているようです。 ここでは皆さんがHTML5を超速で学ぶのに、もっとも効率的なノウハウサイトや便利ツールを紹介しています。 ※HTMLの基礎はこちらから学べます→HTMLを学ぼう！ HTML5入門サイトHTML5, きちんと。 ５分～10分ぐらいでHTML５というものが何なのかを理解できるようになります。 HTML