takuma1021のブックマーク - はてなブックマーク

効率よくコーディングを進めるためにChatGPTを使ってみよう

この記事についてこの記事は、 Web制作の基礎から学べる「Webコーディングスクール」などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみようグロナビをChatGPTで生成してみようボタンをホバーした時のCSSをChatGPTで生成してみよう H

takuma1021 2023/04/25

リンク

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売

私はある出来事をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。最初はこうしようと思っていたしかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。たった1つのアプリで完結させることができるという事に気づいたここ最近はたった1つのアプリでWebデザインを完結させるワーク

takuma1021 2019/07/02

あとで読む

リンク

Macの基礎の基礎: テキスト入力と編集とテキストエディット編

このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。しかし、以下のことをご存知でしょうか？ Mac は、control キーを使用することで、マウスを操作することなくさまざまなテキスト編集が可能である Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つある。それらを使いこなすことでより効率のよいテキスト編集が可能である「テキストエディット」では、複数行の検索や置換が可能であるもしこれらのことをご存じなかった場合、この記事を読む価値があるかもしれません。写真素材: ぱくたそこの記事では、前半は基本的な文字の入力方法、後半は control キーなどを使用したやや高度なテキスト編集の方法、テキストエディットの使いこなしなどについて書いています。なお、この記事では Apple

takuma1021 2014/03/12

リンク

WordPressのログイン・管理画面にBasic認証をかけるプラグイン「WP Admin Basic Auth」を作りました

takuma1021 2013/08/23

リンク

WordPressのトップページを雑誌や新聞のような段組にする方法

WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。準備まず jQuery Masonry 公式サイトのページ中央にある「Download the script

takuma1021 2012/01/23

WordPress

リンク

WordPressテーマ制作チュートリアル

この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストールまだレンタルサーバを借りていない

takuma1021 2011/12/02

WordPress

リンク

[連載]Webデザイン入門（1日目） | Stocker.jp / diary

本日から新たに、「Webデザイン入門」というタイトルで連載を始めます。 9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフトの操作方法を習得しただけではWebデザイナーとして就職し、仕事していくのは少々厳しいのではないかと思いました。そこで、ソフトの操作方法と平行して「Webデザインそのもの」について考える時間を設けたいと思い、オリジナルのカリキュラムを作ることにしました。ここでは、そのカリキュラムの一部をブログ形式にして掲載しています。既にWebデザインの仕事をされている方はご存知のことばかりかもしれませんが、これからWebデザイナーになりたい方や、今はプログラミングなどデザイン以外の仕事をされていて、これからデザインも手がけてみたいと

takuma1021 2011/09/28

webデザイン

リンク

[連載]WordPressでWebサービスを作る方法（7:ソーシャルメディアマーケティング） | Stocker.jp / diary

さて、SEOを意識してコーディングしたところで、サービスをオープンしてすぐに人が来てくれるわけではありません。昔は新しいサイトやサービスを作ってもすぐには人が来てくれないのが当たり前で、色々なサイトに相互リンクを申し込んだりして地道に人が来るのを待っていたものですが、今は Twitter、Facebook、はてなブックマークなどのソーシャルメディアを少し活用するだけで初日から沢山の方に来て頂けるので楽しいですね。この記事ではソーシャルメディアとは何かなぜソーシャルメディアマーケティングが重要になったのかサイト制作・運営者はソーシャルメディアとどのように付き合い、活用すべきかについて考えてみたいと思います。この記事を書くにあたり、「ソーシャルメディアマーケティングとは何か」ということについて、渋谷にあるソーシャルメディアマーケティング会社株式会社ハロ取締役の @ossam

takuma1021 2011/07/07

リンク

[連載]WordPressでWebサービスを作る方法（1:PHPとは） | Stocker.jp / diary

このブログでは何度も触れていますが、3月にフリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンしました。このサイトは、WordPress というブログ向けの CMS（コンテンツ管理システム）を使って作りました。このサービスを作った際の手順をケーススタディとして「PHPやWordPressを全く知らない方でも、WordPressでWebサービスを作り、それをたくさんの方に利用して頂ける方法を分かりやすく学べる記事を書こう」と思い書き始めたのがこの記事ですが、「PHPとは」から「WordPressサイトにおける内部SEO」「ソーシャルメディアマーケティング」まで網羅する特大記事になり、1記事として一度に掲載することが難しくなったので、全10回の連載としてお送りします。 WordPressやPHP初心者の方はぜひ1ページ目からソースコードを書き写しながら、既に

takuma1021 2011/06/15

リンク

HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件

私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。私自身、NetBeans IDE を使うようになってからサ

takuma1021 2011/05/11

リンク

ついに出た！Chrome版「Page Speed」の使い方

2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。ぜひ、ご自身のサイトの改善に役立てていただければと思います。そもそも、なぜサイトの表示速度を速くする必要があるのか？例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。大手サイトや大規模なECサイトに限らず

takuma1021 2011/03/28

リンク

年末年始にWebデザインを学び直すための3つのステップ

この記事は、以下のような方を対象にしています。現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。もしかしたら他の方にも役立つかなと思い、公開しました。今回は、主にWebデザインの中でも「レイアウト」について書いています。まずは「知る」こと私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く