【必見】初心者WEBデザイナーが真似したい５つのWordPressデザイン - えたーなる
2014-10-26 【必見】初心者WEBデザイナーが真似したい５つのWordPressデザイン WEBデザイン 【PR】 ととっち（@totocchissu）です。 最近、ウェブデザイン検定3級に合格してほんのちょっとだけウィブデザインについて詳しくなりました。3級なんでほんのちょっとですよ。すこーしです。←しつこい 実は私、半年前までウェブデザインについてド素人でございました！！！どんぐらいド素人かというと文字の色を変えたり文字を大きくしたりすることも出来ませんでしたー！！！！ それが難しいデザインでなければコーディングもそこそこ出来るようになり、お仕事もそこそこ出来る程度です。 ちなみにWordPressは苦手なので勉強中・・。 そこで今回はWordPressを勉強するにあたって参考にしてるブログを紹介させていただこうと思います。 なぜ公開しようと思ったのかといいますとQtaro
１年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - LITERALLY
Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。2014.10.13 WEBデザイナーは技術はもちろん、手持ちのリソース（情報など）が多いほど有益なデザインを完成させることができます。 しかし海外の素材サイトは、ウイルスリスクの懸念や利用規約も英語で理解できなかったり曖昧だったりでちょっと怖いイメージがあります。特に商用で利用したい場合にはしっかりと利用規約を確認することができる日本で運営しているサイトのが安心ですね。 ここでは本当に使えるWEBデザイナーご用達の商用フリーの素材サイトをまとめました、デザイナーに限らず趣味でサイトを運用している方にも保存版の8サイトをご紹介します。 PAKUTASO5000枚近く（2015/10時点）の写真素材を保有するパクタソは管理者の方が手間を惜しまず写真を1枚1枚選別し、さらにノイズ処理や補正、トリミングなどを行
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました
2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
ガーリーなデザインがしたい！おすすめのサイト＆テクニックまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 今回はガーリーなデザイン制作のためにチェックしておきたい素材サイトやテクニックをご紹介したいと思います。 素材編 デザイン枠、飾り罫素材専門サイト「フレームデザイン」 http://frames-design.com/ かわいい飾り枠がいっぱい！ デザインにフレームを取り入れたいと思ったとき、とりあえず覗きに行ってしまいます。 pngとaiデータが揃っていてうれしいです。大変お世話になっています。 吹き出し素材専門サイト「フキダシデザイン」 http://fukidesign.com/ 当ブロクでも何度か紹介している定番サイト様ですが、ゆるふわなサイトには吹き出しがつきものですよね！ こちらもaiデータを配布されています。 ガーリー素材 | 無料フリーイラスト素材配布サイト http://girlysozai.com/ 可愛くてクオリティの高いイラスト素
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
無料のマインドマップ作成ツールならcoggleがイイ！使い方紹介
簡単なマインドマップを描くなら『coggle』がすごくいいよって話したっけ？してないよなぁ？ coggleはインストール不要で、Mac・Windowsどちらでも無料で利用可能なマインドマップ作成ツールです。 ささっと思考の整理をするにはいいと思います。pdf化やpng化なんかもすぐできるのでEvernoteやDropboxとの相性も抜群。使ってみて気に入ったので紹介しますね。 フリーのマインドマップ作成ツール、coggleの使い方 はいそれじゃあ改めて『coggle』にアクセスしてみてください。 まずは『SIGN UP』を押してアカウントを作ろう。Googleアカウントがあればそれで良い。ログインしたら『CREATE』ってボタンがあるので押す。 すると白いキャンパスに謎のボタンが現れます。 端っこの方にカーソルを合わせると『+』ボタンが出てくるので押す。 なんとなく『今ほしいもの』をばばっ
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
画像の作り方・使い方でファイルサイズを減らす方法
画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合
Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！ もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
Webデザインが3倍速くなる！Photoshop神速テク4つ
カンプのデザインやパーツの作成など、Webデザインにも欠かせないPhotoshop。もっとラクに、もっと速くWebデザインするために、すぐに役立つ4つの時短テクニックを紹介します。 サイズ違いのバナーはまとめて使い回し Photoshopでよく作るモノの1つといえば、バナー。掲載場所や配信先によってサイズが異なるバナーをバラバラに作成すると使い回しが面倒だし、写真や文言に変更があったときにいちいち直すのが大変ですよね。 いろんなサイズのバナーを1つのPhotoshopファイルにまとめて作成し、写真やロゴをスマートオブジェクトで一元化しておくと、バリエーションをスピーディに作れ、修正にも対応しやすくなります。 例として、大中小の3つのバナーを一気に作ってみましょう。作成する最大サイズのバナーが収まるように新規ドキュメントを作成し、大きいサイズのバナーから作成します。 レイヤーに素材を配置して
【保存版】バナーの作り方やデザインの参考になる記事やサイトまとめ
皆さんは、満足したバナーが作れていますか？ バナーは、自社サイトへの誘導やCVにつなげるための重要な役割を果たします。 しかし、限られたサイズの中で、ターゲットに刺さるバナーをデザインするというのはなかなか難しいもの・・・。 そこで今回は、効果が高い高品質なバナーを作成するために役立つ記事やサイトをご紹介します。 Webデザイナーやディレクターには特におすすめです。 効果の出るバナーの作り方の参考になる記事 実際に効果の出ているバナーの事例を参考にすることは大いに役立ちます。 下記で紹介している記事を読みつつ、実践していけば、効果の出る高品質なバナーを作れるようになるでしょう。 100種以上の自社広告運用でわかった！バナー広告クリエイティブ4つの基本 LINEが今までに運用してきた広告からわかった、効果の出るバナークリエイティブを作るためのポイントを紹介している記事。 実際にたくさんのPD
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の
経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン
2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[M]WEBデザインを勉強したい方必見！実際に読んで参考になったWEBデザイン系スライド5選 | miMemo(ミメモ)![[M]WEBデザインを勉強したい方必見！実際に読んで参考になったWEBデザイン系スライド5選 | miMemo(ミメモ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/5e150ee9637acb3305e1bc4705dac7271529b553/height=288;version=1;width=512/https%3A%2F%2Fweb-mimemo.com%2Fwp-content%2Fuploads%2F2014%2F06%2Fslide_web_basic.jpg)
フラットデザインテンプレート集 / ウェブデザインライブラリー
新着記事
