乃木坂46の公式サイトのリデザインで学んだこと｜Miyu Otsuki
先日、ふとしたきっかけで乃木坂46の公式サイトをリデザインを思い立ち、スキルアップの一環も兼ねてトップページをリデザインをしていました。 そのリデザインから学んだことなどをブログに書きたいと思っていたのですが、公式サイトに掲載されているコンテンツの著作権上、なかなか難しいかなと思い、念のため乃木坂46の運営委員会に問い合わせてみたところ、営利目的でなければ使用しても大丈夫（ブログの掲載も可）との許可をいただいたため、こちらに書くことにしました（2/9 16:43：問い合わせの内容は、公式サイトのお問い合わせフォームから送信したため、画像の添付などはしていません。コンテンツの掲載許可は頂きましたが、運営委員会に直接デザインデータを送ったわけではありません）。 なぜリデザインをしたいと思ったのかもともとアイドルが好きで、アイドルグループの公式サイトをチェックする機会が多いのですが、乃木坂46の
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.3 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
ブログの始め方【初心者向け】運営のコツから収益化までの流れを解説
これからブログを始めたい人に向けて、ブログを始める前の準備からおすすめのブログサービスまで、詳しく解説していきます。 私がブログを始めたのは約9年前で、あの時ブログを始めてよかったなと実感しています。 ブログで文章を書くことで思考が整理できたり、自分の体験談が誰かの役に立ったり、ブログはきっとあなたの世界を広げてくれるものになるはずです。 アフィリエイトブログの本を執筆しました 趣味として始めるのはもちろん、ブログを始めることでマーケティングの勉強になったり、本業とは別に副収入が得られたり、仕事にも良い影響があるかもしれません。 文章を書き慣れていなくても、読まれるかどうか不安でも、試行錯誤しながら続けるうちに慣れて読者も少しずつ増えていくものです。 ブログは根気が必要ですが、それだけやりがいもあってコツコツと自分だけのブログを育てるのはとても楽しいので、同じようにブログを楽しむ人が増えた
ド素人でも3分でおしゃれなブログデザインを実現する11の法則 - 今日はこれを証明しようと思う。
2016 - 12 - 22 ド素人でも3分でおしゃれなブログデザインを実現する11の法則 ブログ論 あなたのブログの記事がどんなに面白くて、役に立ったとしても、 読みづらくてデザインがダサかったら、読者は途中で離脱 してしまいます。 いっぽう、当ブログは、よくこんなことを言われます。 記事が読みやすい ブログがおしゃれ すごいシンプルでまとまっている WordPressかと思ってた キャラクターがかわいい← みなさん、ありがとうございます（照） 今でこそ、こんなことを言ってもらえるようになりましたが、僕はWebデザインの知識もなければ、IllustratorやPhotoshopの類も全くつかえません。ついでに絵もめちゃくちゃ下手くそです← この記事ではそんな僕が、いろんな有名ブロガーのデザインを研究しまくって編み出した、「 ド素人でも3分でおしゃれなブログデザインを実現する11の法則 」
「ブログカードは死ぬほどクリックされない」はウソ。Ptengineの仕様から見えた真実とは？ - NaeNote
2016 - 12 - 25 「ブログカードは死ぬほどクリックされない」はウソ。Ptengineの仕様から見えた真実とは？ ブログ ブログ-Tips このくらいシェアされています ... ... ... G+ ... ... スポンサーリンク 【お知らせ】 読み込み中・・・ こんにちは、なにごとも検証するクセがあるNAEです。 Ptengine の提供する「ヒートマップ」機能。 Webサイト上の読者のクリックを分析し、ヒートマップとして可視化することでユーザの行動傾向を把握できる便利なサービスです。 最近、ブログをヒートマップ分析した結果をもって 「ブログカードは死ぬほどクリックされない」 と主張する記事を見かけました。 気になったので調べてみたところ、これは 事実誤認 であることがわかりました。 クリックされていないのではなく、単に Ptengineでクリックを検知できていないだけ です
ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ Fixed Disappearing Scrolling Header スクロールすると表示されている文字テキストがフェードアウト
Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
無料で使える日本語ウェブフォント9種類をGoogleが公開中
閲覧者のPCにフォントがインストールされていなくても指定したフォントを表示できるウェブフォントは、閲覧者の使用環境にウェブサイトのデザインが左右されないため非常に便利なのですが、アルファベットとは違い文字の種類が多いため日本語に対応したウェブフォントが少ないのも事実。そんな中、Googleが日本語フォント9種類をウェブフォントとして試験的に無料公開しています。 Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access https://googlefonts.github.io/japanese/ ウェブフォントとして利用できるようになったのは以下の9種類。もともとGoogleは独自開発したフォント「Noto Sans Japanese」を日本語フォントとして公開していましたが、今回はそれに加えて、「M+ FONTS」や
はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き） - LITERALLY
以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。 はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally 多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。主にコピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。 はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません… はてなブログテーマ「DUDE」を作りました。 「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出し
CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
12/07：その他のカスタマイズを充実させました。 以前、グローバルメニューとトグルメニューを両立してレスポンシブスタイルにするメニューバーを作りました。 以前の記事 www.yukihy.com このメニューバー、CSSを勉強したてに作ったものなので、若干の不満な点などが残ったりしていました。例えば「タイトル下」の部分に広告を入れるとトグルメニューのときにデザインが崩れたりすることです。 また、メニューバーにドロップダウンメニューにできないかとのご質問もいただいたので、合わせて修正版のやり方を記事にしたいと思います。 はてなブログ向けですが、全く同じコードで他のブログサービスでも使えるのではないかと思います。 カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLの中にリン
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
これ知ってる？WEBの人なら押さえておきたいツール＆サービス50選 - 死ぬまでWEB屋
公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得
Webデザインの配色に役立つ！色彩について学べるサービス・ツール12選まとめ｜SUKIMANO
Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。 そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。 そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。 1. Adobe Color CC https://color.adobe.com/ja/ 「 Adobe Color CC 」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。 「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。 さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。 納得いく配色パターンができないときは、「探索」のメニューからパ
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
シンプルなカラーで作る失敗知らずのウェブデザイン
ウェブデザインにおいて、サイトイメージに大きな影響を与える「カラーパターン」は重要です。ついつい色にこだわって色数を増やして全体のバランスを崩してしまいがちなカラーデザインを、極力少ない色だけで、バランスの整った見た目に美しい仕上がりにする方法論がウェブデザイナーによって解説されています。 A Simple Web Developer's Guide To Color – Smashing Magazine https://www.smashingmagazine.com/2016/04/web-developer-guide-color/ Design Academyを主催するウェブデザイナーのローラ・エリザベスさんは、シンプルなカラーデザインで失敗しないデザイン論「simple color workflow」を提唱しています。エリザベスさんは多くの色を複雑に使いこなすよりも、サイトのカ
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site is undergoing maintenance
Site is undergoing maintenance
Site is undergoing maintenance
ituore.com
