クリエイターズメモ

リモートワークでWebデザイナーをやっています。主に備忘録としてnoteを使っています。

クリエイターズメモ

リモートワークでWebデザイナーをやっています。主に備忘録としてnoteを使っています。
すべてのマガジンを表示

【2021年版】各SNSの画像サイズのまとめ

こんにちは。Webデザイナーのふくだです。 最近、SNSのプロフィールアイコンとヘッダー画像を新しく作ったのですが、各SNSのアイコンやヘッダーのサイズを個別に調べるのがめんどくさかったのでのまとめてみました。 Twitter ● プロフィールアイコン 400px × 400px ● ヘッダー 1500px × 500px Facebook ● プロフィールアイコン 170px × 170px以上の正方形（png推奨） ● カバー 851px × 315px I

クリエイターズメモ

    • 個人的によく使う定番のJQuery

      こんにちは。Webデザイナーのふくだです。 デザインだけでなく、コーディングをする機会も多いので備忘録として個人的によく使うJQueryをまとめてみました。 ■スムーズスクロール$(function () { $('a[href^="#"]').click(function () { var speed = 500; var href = $(this).attr("href"); var target = $(href == "#" || href == ""

      クリエイターズメモ

      • Webで使えそうなアマビエを描いてみた

        こんにちは。Webデザイナーのふくだです。 新型コロナウイルスの感染拡大を受けてSNSでこの絵を描く人が相次いでいますね。僕はWebサイトで使えそうなテイストでアマビエを描いてみました。 ちなみにアマビエとは "アマビエは江戸時代末期の弘化3年（1846年）に、現在の熊本県に出現したと言われる妖怪。「病気が流行したら自分の姿を写して人々に見せるように」と伝えて海中に消えたと伝えられています。" ■スタンダードタイプ ここ数年はフラットデザインが主流なのでそれらのサ

        クリエイターズメモ

        • 印刷物の最小文字サイズと最小線幅

          Webデザイナーのふくだです。 前回に引き続き印刷物の基本知識。これまた忘れるので。 ■最小文字サイズ 5pt〜6pt 4ptでも読めるが書体によっては厳しい。 印刷会社によっても異なるので注意が必要。 ■最小線幅0.3pt以上 印刷会社によっては0.25ptでもいけるので入稿前に要確認。 ※1ptは約0.35mm、約1.4Q

          クリエイターズメモ

        【2021年版】各SNSの画像サイズのまとめ

        クリエイターズメモ

        マガジン

        • カメラ
          2本
        • マーケティング
          1本
        • ビジネス
          8本
        • UIデザイン
          5本
        • UXデザイン
          3本
        • デザインの考え方
          10本

        記事

          オフセット印刷とオンデマンド印刷

          こんにちは。Webデザイナーのふくだです。 仕事のメインはWebなのですが会社のイベントのチラシを作って入稿する機会がちょくちょくあります。入稿時にいつもオフセットとオンデマンドどっちがどっちだっけ？ってなるので備忘録として書いておきます。 ■オフセット印刷・版を使用した印刷方法 ・高品質で細かいデザインや文字もきれい ・大部数向き ・納期がかかる ■オンデマンド印刷・レーザープリントを使用した印刷方法 ・オフセットと比べると品質が劣る ・少部数向き ・納期が短い

          クリエイターズメモ

          オフセット印刷とオンデマンド印刷

          クリエイターズメモ

          SVGファイルを表示させる時の注意点

          こんにちは。Webデザイナーのふくだです。 SVGファイルを使用した際に表示されないケースがあったので注意点を書いてみました。 ■サーバーの設定をしないと表示されない下記のように画像としてHTMLやCSSで読み込んで使用する場合はサーバーの設定をする必要があります。 <img src="icon.svg" width="48" height="48"> .icon { background-image: url("icon.svg");} サーバーの設定は".hta

          クリエイターズメモ

          SVGファイルを表示させる時の注意点

          クリエイターズメモ

          一眼とコンデジのアスペクト比

          こんにちは。Webデザイナーのふくだです。 デザインで写真を使う場合はいつもアスペクト比を気にしています。 その時によく一眼の写真って3:2だっけ？4:3だっけとすぐ忘れるので備忘録として書いておきます。 ■一眼レフ3:2 理由：35ミリフィルムの比率を受け継いでいるため。 ■コンデジ4:3 理由：ビデオカメラの比率を流用したため。

          クリエイターズメモ

          一眼とコンデジのアスペクト比

          クリエイターズメモ

          aタグでdivを囲む時の注意点

          こんにちは。Webデザイナーのふくだです。 よくやっちまうので備忘録として書きます。 aタグでdivを囲みたい場合、中にaタグがあるとブラウザは正しく表示してくれません。 <a href="#" > <div> <a href="#" >テキスト</a> </div></a> ↑ブラウザで崩れる 対処法中身のaタグはobjectタグで囲む <a href="#" > <div> <object><a href="#" >

          クリエイターズメモ

          aタグでdivを囲む時の注意点

          クリエイターズメモ

          久々にSkypeを使ってみた感想

          こんにちは。Webデザイナーのふくだです。 仕事で久々にskypeを使って気になった点をまとめてみました。 重くなった…僕が使っていた頃はとにかく軽くて起動が早かった。 それとメッセージ入力欄にテキストをコピペする時に変にタイムラグがある。 デフォのアイコンアイコンは設定していないと名字と名前の頭文字で表示される。 例えば「山田太郎」だと「山太」。 これが非常ににわかりにくい。まだ名字か名前だけの方がよい。 デザイン面今風のスタイリッシュなデザインでいいが、なんかこう昔

          クリエイターズメモ

          久々にSkypeを使ってみた感想

          クリエイターズメモ

          WebデザイナーがBootstrapを使ってコーディングをしてみた

          こんにちは。Webデザイナーのふくだです。 Web制作をする人にはお馴染みのフレームワークBootstrap。 本来デザインが苦手なエンジニア向けのサービスですが、仕事で使う機会があったのでデザイナー目線から感想を述べたいと思います。 ■良い点すでにパーツが用意されている タブやアコーディオン、モーダルなど実装するのが面倒なパーツが揃っています。 >各パーツ グリッドシステム classの使い方を覚えれば思い通りのカラムを作れます。 >グリッドシステム 微調整も簡単

          クリエイターズメモ

          WebデザイナーがBootstrapを使ってコーディングをしてみた

          クリエイターズメモ

          Bracketsを2年ほど使用した感想

          こんにちは。Webデザイナーのふくだです。 Sublime TextからAdobe Bracketsに乗り換えて2年。個人的に良い点といまいちな点をまとめてみました。 ■良い点デフォで日本語対応 英語が苦手なもので。 html上でcssが編集できる classにカーソルを合わせてCmd+E（Mac）でcssを開いて編集ができます。たまに違うファイルを参照する場合がありますが右側の一覧で選択可能です。 コードスニペットの登録が便利 個人的にこれがあるからBrackets

          クリエイターズメモ

          Bracketsを2年ほど使用した感想

          クリエイターズメモ