Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版
こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた
プロモニスタ | ウィルゲートのSEO・コンテンツマーケティング情報
こんにちは！ウィルゲートでマーケティング企画を担当している小笠原(@miyumaru222)です。 私の所属するマーケティングの部署では、9月から...
【徹底検証】乗り換えたいでしょ？WordPressTCDテーマの変更方法と注意点
TCDテーマからTCDテーマへ。 魅了されてしまった。ついに乗り換えてしまった。最初はそんなつもりじゃなかったんだ。いや、どこかでそんな気持ちはあったのかもしれない・・・ え？あぁ、WordPressテーマの話です。次々とリリースされるTCDテーマを見ていると・・・サイトをリニューアルしたくなりますよね。でもテーマの変更って、レイアウトも変わるし、注意点多そうだし・・・いくら同じTCDテーマからの乗り換えだとしても・・ねぇ？ いきなり新しいテーマを「有効化」するなんて不安過ぎる・・・ 不具合で表示が崩れたサイトなんて、一瞬たりとも見せたくないっ 今までしてきたカスタマイズって、うまく引き継げるんだろうか？ どーせやるなら絶っっ対に失敗したくない！ 記事数が多いほど、カスタマイズが多いほど慎重になってしまいますよね。大切なサイトを台無しにしたくない。今回はそんな不安たちを一掃するテーマ変更方
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ
WordPress をカスタマイズするなら覚えておきたい条件分岐タグと、カスタマイズにとっても便利なカスタム投稿タイプについて、簡単にまとめてみました。 WordPress をカスタマイズするなら、必ずと言っていいほど使うのが条件分岐タグ。ブログとして Webサイトを構築するなら、とってもよく使う … というほどではないかもしれませんが、一般的な Webサイトを WordPress で構築していくとなると、動的な Webサイトであればあるほど、条件分岐タグはよく使います。 また、話は変わっちゃいますけど、WordPress 3.0 から本格的に採用された新機能、カスタム投稿タイプも、WordPress でのサイト構築にはかなり便利です。おなじみの条件分岐タグから、カスタム投稿タイプ、タクソノミーまでを、メモっぽくまとめてみました。 WordPress サイト構築 Tips 目次 WordP
Webクリエイターボックス
タグ: CSS 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 続きを読む CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 続きを読む CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ 続きを読む 最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テ
SEO のために rel 属性を指定する
icon や stylesheet などは一般的な利用方法で良いですね。 意識して指定しておきたい値は、author, bookmark, licenseです。 ほとんどのサイトがそのテンプレート (Ex.ヘッダ、フッタ、一覧など) にこれらを指定するべきコンテンツを持っていると思います。 著作権情報や管理者を author や license によって明確にし、 普遍的なページへのリンクは常に bookmark を付けておくようにしたいところです。 また、いくつかの属性値は Google などの検索エンジンが特別な処理を行うので注意が必要です。 例えば nofollow は特別な処理が行われます。特別な処理が行われる属性値については後に続く項目で言及します。 検索エンジンにおける "nofollow" nofollow は公式には次のようにされています。簡易に翻訳すると次のような感じでし
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
GoogleやYahoo! JAPANでさえ間違ってる、Copyright（コピーライト） の正しい書き方 – 2016年版
2016年も半ばを迎えようとしていますが、いまだに多くのWebサイトで©表記を見かけますね。 まだコピーライトで消耗してんの？って感じです。 後述のように、コピーライト表記は2016年現在「そもそも不要」なんですが、一応「正しい書き方」というのも存在するので、興味のある方は流し見でどうぞ。 1. そもそもコピーライト表記なんていらない？ 2016年現在、日本を含めほぼすべての国が「ベルヌ条約」という条約に加盟しています。 その条約によれば、著作物を創作した時点で著作権は発生するので、もはや昔のようにWebサイト上でわざわざ著作権表記（©）をせずともいいわけです。 それでもいまだに©表記を見るのは、古い時代の慣習（昔は©を書かなきゃいけなかった）がそのまま残ってしまってるか、もしくは無用なトラブルを避けるために「不安だからとりあえず書いてる」といったところでしょうか。 たしかに、すべての国が
%25E3%2581%25AE%25E6%25AD%25A3%25E3%2581%2597%25E3%2581%2584%25E6%259B%25B8%25E3%2581%258D%25E6%2596%25B9%25E3%2582%2592)
Copyright(コピーライト：著作権表示)の正しい書き方を知っていますか？：webサイト制作 - webデザイン初心者｜sometimes study
webサイトの1番下にある『著作権表示』色々な表記を見かけるけどどれが正しいのー？って思ったことありませんか？ Copyright(コピーライト：著作権表示)の 正しい書き方を知っていますか？ webサイトでいう『Copyright(コピーライト/著作権表示)』は、サイトの1番下にある Copyright © 2015 sometimes study All Rights Reserved. (c) 2010-2015 sometimes study All Rights Reserved. こんな感じの表記のことです。 このページの所有者は私ですよ！という『著作権の所有を示すおまじない』みたいなものですね。ひとつずつ、一緒に書き方をおさらいしていきましょう！ 『著作権(ちょさくけん)』って何？ まず、著作権とは？ってところからですね。 著書などの 制作物に対して 発生する権利 知的財産権
ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集 | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
WordPress バックアップ方法と最適なデータ保管方法 - Naifix
WordPress バックアップの基礎知識 最初に WordPress バックアップの基礎知識をおさらいしておきましょう。 バックアップデータが必要な理由 WordPress のバックアップデータが必要になるのは、以下のようなシーン。 本体・テーマ・プラグインのアップデートに失敗して正常に動作しなくなった .htaccess や wp-config.php などの重要なファイルを書き換えてしまった テーマファイルやプラグインファイルの編集ミスがあった サーバーのトラブルでデータが全部吹き飛んでしまった ハッキング被害に遭ってファイルが書き換えられてしまった こうしたトラブルは対岸の火事ではなく、あなたのブログでも起こり得る可能性は十分にあります。 バックアップを取っておけばトラブルがあっても数分で元に戻せますし、自力での復旧が難しくても専門業者にファイルを渡せばすぐ元に戻してくれます。 い
バックエンドエンジニアによるプログラミング連載をスタートします。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。長野県の野尻湖でバックエンドエンジニアをやっているヤスタカです。 今回から、LIGのバックエンドエンジニアによる「バックエンドへの道」という連載がはじまります！ この連載では、簡単なWebサービスの構築方法を説明しながら、バックエンドエンジニアになるためのプログラミング知識を紹介していく予定です。 プログラミング技術を習得することは簡単ではありませんが、ひとつずつ始めていけば、だれでもプログラミングはできるようになるんです。ルーチン業務を自動化するようなプログラムをささっと書けたら……すごく便利だしかっこいいですよね？ 本日は導入編として、プログラミングを始めるメリットや学習方法をご紹介します。 FacebookやTwitter、Dropboxなど世界的サービスの創始者やエンジニアが、本当に楽しそうにプログラミングについて語っています。実は、プログラミングはそれ自体がとても楽し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の基本的な文法 - Webデザインの勉強 9月12日開講クラスWebサイト制作科
1時間で作るホームページ